title: How to make changes made in ngDialog modal appear on main page
body: <p>I'm new to both AngularJs and <a href="https://github.com/likeastore/ngDialog">ngDialog</a>, and I'm having trouble getting my bindings to work between the ngDialog modal and my controller.  I injected the controller's scope into the modal by specifying <code>{ scope: $scope }</code>, and I have access to methods defined in the controller, but the bindings to models defined in the controller aren't functioning properly.</p>
  
  <p>I'm trying to use a modal to allow the user to add an address to an organization.</p>
  
  <p>Here's main.js</p>
  
  <pre><code>var App = angular.module('App', ['ngRoute', 'ngCookies', 'ngDialog']);
  
  ...
  
  App.controller('PageOrganization', function($scope, $rootScope, ngDialog, $route, $location){
      $scope.addAddressFormData = {};
  
      $scope.addAddress = function(){
          ngDialog.open({
              template: 'partials/modals/add-address.html',
              controller: 'PageOrganization',
              scope: $scope
          });
      };
  
      $scope.saveAddress = function(){
          console.log($scope.addAddressFormData);
          $scope.organization.addresses.push($scope.addAddressFormData);
          console.log($scope.organization);
      };
  
      // STUBBED OUT ORGANIZATION
      $scope.organization = {
          org_type: "nonprofit",
          name: 'New Organization',
          addresses: [],
          phoneNumber: "",
          faxNumber: "",
          emailAddress: "",
          website: "",
          primaryContact: "",
          primaryEmail: "",
          imageUrl: "",
          isPrivate: false,
          campaigns: [],
          admins: []
      };
  </code></pre>
  
  <p>Here's organization.html:</p>
  
  <pre><code>...
  
  &lt;button ng-click="addAddress()"&gt;Add an Address&lt;/button&gt;
  &lt;h1&gt;Addresses&lt;/h1&gt;
  &lt;ul&gt;
      &lt;li ng-repeat="address in organization.addresses"&gt;
          &lt;p&gt;
              {{address.type}} &lt;br&gt;
              {{address.addressLine1}} &lt;br&gt;
              {{address.addressLine2}} &lt;br&gt;
              {{address.city}} &lt;br&gt;
              {{address.state}} &lt;br&gt;
              {{address.postalCode}}
          &lt;/p&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>And here's add-address.html:</p>
  
  <pre><code>&lt;h1&gt;Add an Address&lt;/h1&gt;
  &lt;form ng-submit="saveAddress()"&gt;
      &lt;select name="type"&gt;
          &lt;option value="business" default="selected"&gt;Business&lt;/option&gt;
          &lt;option value="residence"&gt;Residence&lt;/option&gt;
      &lt;/select&gt;
      &lt;input ng-model="addAddressFormData.addressLine1" type="text" placeholder="Address Line 1"&gt;
      &lt;input ng-model="addAddressFormData.addressLine2" type="text" placeholder="Address Line 2"&gt;
      &lt;input ng-model="addAddressFormData.city" type="text" placeholder="City"&gt; 
      &lt;select ng-model="addAddressFormData.state"&gt;
         &lt;option value="AL"&gt;Alabama&lt;/option&gt;
         &lt;option value="AK"&gt;Alaska&lt;/option&gt;
         &lt;option value="AZ"&gt;Arizona&lt;/option&gt;
         &lt;option value="AR"&gt;Arkansas&lt;/option&gt;
         &lt;option value="CA"&gt;California&lt;/option&gt;
         &lt;option value="CO"&gt;Colorado&lt;/option&gt;
         &lt;option value="CT"&gt;Connecticut&lt;/option&gt;
         &lt;option value="DE"&gt;Delaware&lt;/option&gt;
         &lt;option value="DC"&gt;District Of Columbia&lt;/option&gt;
         &lt;option value="FL"&gt;Florida&lt;/option&gt;
         &lt;option value="GA"&gt;Georgia&lt;/option&gt;
         &lt;option value="HI"&gt;Hawaii&lt;/option&gt;
         &lt;option value="ID"&gt;Idaho&lt;/option&gt;
         &lt;option value="IL"&gt;Illinois&lt;/option&gt;
         &lt;option value="IN"&gt;Indiana&lt;/option&gt;
         &lt;option value="IA"&gt;Iowa&lt;/option&gt;
         &lt;option value="KS"&gt;Kansas&lt;/option&gt;
         &lt;option value="KY"&gt;Kentucky&lt;/option&gt;
         &lt;option value="LA"&gt;Louisiana&lt;/option&gt;
         &lt;option value="ME"&gt;Maine&lt;/option&gt;
         &lt;option value="MD"&gt;Maryland&lt;/option&gt;
         &lt;option value="MA"&gt;Massachusetts&lt;/option&gt;
         &lt;option value="MI"&gt;Michigan&lt;/option&gt;
         &lt;option value="MN"&gt;Minnesota&lt;/option&gt;
         &lt;option value="MS"&gt;Mississippi&lt;/option&gt;
         &lt;option value="MO"&gt;Missouri&lt;/option&gt;
         &lt;option value="MT"&gt;Montana&lt;/option&gt;
         &lt;option value="NE"&gt;Nebraska&lt;/option&gt;
         &lt;option value="NV"&gt;Nevada&lt;/option&gt;
         &lt;option value="NH"&gt;New Hampshire&lt;/option&gt;
         &lt;option value="NJ"&gt;New Jersey&lt;/option&gt;
         &lt;option value="NM"&gt;New Mexico&lt;/option&gt;
         &lt;option value="NY"&gt;New York&lt;/option&gt;
         &lt;option value="NC"&gt;North Carolina&lt;/option&gt;
         &lt;option value="ND"&gt;North Dakota&lt;/option&gt;
         &lt;option value="OH"&gt;Ohio&lt;/option&gt;
         &lt;option value="OK"&gt;Oklahoma&lt;/option&gt;
         &lt;option value="OR"&gt;Oregon&lt;/option&gt;
         &lt;option value="PA"&gt;Pennsylvania&lt;/option&gt;
         &lt;option value="RI"&gt;Rhode Island&lt;/option&gt;
         &lt;option value="SC"&gt;South Carolina&lt;/option&gt;
         &lt;option value="SD"&gt;South Dakota&lt;/option&gt;
         &lt;option value="TN"&gt;Tennessee&lt;/option&gt;
         &lt;option value="TX"&gt;Texas&lt;/option&gt;
         &lt;option value="UT"&gt;Utah&lt;/option&gt;
         &lt;option value="VT"&gt;Vermont&lt;/option&gt;
         &lt;option value="VA"&gt;Virginia&lt;/option&gt;
         &lt;option value="WA"&gt;Washington&lt;/option&gt;
         &lt;option value="WV"&gt;West Virginia&lt;/option&gt;
         &lt;option value="WI"&gt;Wisconsin&lt;/option&gt;
         &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
      &lt;/select&gt;
      &lt;input ng-model="addAddressFormData.postalCode" type="text" placeholder="Postal Code"&gt; 
      &lt;input type="submit" value="Save Address"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The modal has access to the parent scope; it successfully calls <code>$scope.saveAddress()</code> and <code>console.log($scope.organization)</code> logs the whole organization, including the new address added in the modal.  However, the new address is not reflected in the <code>ng-repeat</code> in organization.html, and if I add multiple addresses one after another, only the most recent one shows in the log.  </p>
  
  <p>As an experiment, I added this function to main.js:</p>
  
  <pre><code>$scope.pushAddress = function(){
      $scope.addAddressFormData = {city: $scope.organization.addresses.length + 1};
      console.log($scope.addAddressFormData);
      $scope.organization.addresses.push($scope.addAddressFormData);
      console.log($scope.organization);
  };
  </code></pre>
  
  <p>and changed the "Add Address" button in organization.html to match:</p>
  
  <pre><code>&lt;button class="button color-c vertical-a float-right" ng-click="pushAddress()"&gt;Add an Address&lt;/button&gt;
  </code></pre>
  
  <p>Now when I click "Add an Address," the new address shows immediately in the <code>ng-repeat</code>, and each console log contains all of the addresses, not just the most recent one.</p>
  
  <p>What's the difference between these two methods?  Why are the changes made in the modal 'expiring' when they were made using methods in the controller's scope?</p>