T. Ferreira T. Ferreira - 9 months ago 25
jQuery Question

AngularJS: How to save variable in modal to my $scope?

I'm making a task management tool in AngularJS and I have a form that the user has to fill to create a new task. Here's a short version of it:

<div ng-controller="SubmitController">
<!-- Form -->
<input type="text" ng-model="tasks.title">

<input type="text" ng-model="tasks.id">

<select ng-model="tasks.type">
<option value="" disabled selected></option>
<option value="Job">Job</option>
<option value="Maintenence">Maintenence</option>
<option value="Verification">Verification</option>

<!-- This button opens a modal to select the recurrence -->
<a class="btn modal-trigger" href="#modal4">Recurrence</a>

<!-- This button adds the task to the list -->
<a ng-click="add(tasks)" class="btn" type="submit" name="action">Add</a>

Here's how I save the task in my .js file:

$scope.add = function(tasks)
'id': tasks.id,
'title': tasks.title,
'type': tasks.type,
'recurrence_type': tasks.recurrence_type


As you can see I'm saving the tasks in the local storage. This is only a temporary solution for testing purposes, the final version will save the tasks to a database.

Anyway, I also have to have a recurrence mechanism, hence that
in my
, and the button to open the modal in the form.

Here's that modal:

<!-- Modal Structure -->
<div id="modal4" class="modal">
<div class="modal-content">
<select ng-model="tasks.recurrence_type">
<option value="" disabled selected></option>
<option value="Daily">Daily</option>
<option value="Weekly">Weekly</option>
<option value="Monthly">Monthly</option>
<option value="Yearly">Yearly</option>
<div class="modal-footer">
<a href="#" class=" modal-action modal-close btn">Save</a>

My question is: how do I save the recurrence type in that modal to the


The scope of your modal and your template are different in this case. The solution to this problem is that you will have to use the $rootScope.tasks.