title: Angular Two-Way data-binding not refreshing ng-repeat on $scope change
body: <p>My functionality is very simple, and I have to imagine very common. I have a page that lists a collection of 'age groups', and provides functionality to add an 'age group'.  I simply would like to have the page immediately reflect the change when a new 'age group' is added.</p>
  
  <p>In early versions, I had simply used the $rootScope in my service to put all 'age groups' in the $rootScope when the $http request was completed.  On this latest refactoring I am removing all use of $rootScope in my app, and it is becoming problematic.</p>
  
  <p>The code for the HTML view is as follows: <strong>[NOTE: all code considered extraneous has been removed from all code snippets]</strong></p>
  
  <pre><code>&lt;div id="tabContent" class="tab-pane fade in active" ng-show="subIsSelected(1)"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12"&gt;
              &lt;form class="form-inline"&gt;
                  &lt;button type="button" class="btn btn-success" ng-click="openAddAgeGroup()"&gt;Add Age Group&lt;/button&gt;                  
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr /&gt;
      &lt;div class="row row-content"&gt;                    
          &lt;div class="col-xs-12"&gt;
              &lt;h4 ng-show="!areAgeGroups()"&gt;No current age groups.&lt;/h4&gt;
              &lt;ul class="media-list" ng-show="areAgeGroups()"&gt;
                  &lt;li class="media" ng-repeat="ageGroup in ageGroups" style="padding:10px; background: lightGray;"&gt;
                      &lt;div class="media-left media-top" &gt;
                          &lt;img class="media-object img-thumbnail" style="width: 75px;" ng-src="./images/trfc.png" alt="club logo"&gt;
                      &lt;/div&gt;
                      &lt;div class="media-body"&gt;
                          &lt;h3 class="media-heading" style="padding-top: 20px;"&gt;{{ageGroup.name}}&lt;/h3&gt;
                          &lt;button type="button" class="btn btn-xs btn-primary" style="width: 50px;" ng-click="openEditAgeGroup(ageGroup)"&gt;Edit&lt;/button&gt;
                          &lt;button type="button" class="btn btn-xs btn-danger" style="width: 50px;" ng-click="deleteAgeGroup(ageGroup)"&gt;Delete&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>when first loaded, the page correctly shows all 'age groups' that are in the $scope.ageGroups array.</p>
  
  <p>On clicking the button to add an 'age group', an ng-dialog is created as follows:</p>
  
  <pre><code>$scope.openAddAgeGroup = function() {
      console.log("\n\nOpening dialog to add age group");
      ngDialog.open({ template: 'views/addAgeGroup.html', scope: $scope, className: 'ngdialog-theme-default', controller:"HomeController" });
  };
  </code></pre>
  
  <p>and that dialog is populated as such:</p>
  
  <pre><code>&lt;div class="ngdialog-message"&gt;
      &lt;div class=""&gt;
          &lt;h3&gt;Add a New Age Group&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div&gt;&amp;nbsp;&lt;/div&gt;
      &lt;div&gt;
          &lt;form ng-submit="addAgeGroup()"&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="sr-only" for="name"&gt;Age Group Display Name&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="name" placeholder="age group name" ng-model="ageGroupForm.name"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="sr-only" for="birthyear"&gt;Birth Year&lt;/label&gt;
                  &lt;input type="text" class="form-control" id="birthyear" placeholder="birth year" ng-model="ageGroupForm.birthyear"&gt;
              &lt;/div&gt;
              &lt;div class="form-group"&gt;
                  &lt;label class="sr-only" for="socceryear"&gt;Soccer Year&lt;/label&gt;
                  &lt;div class="input-group"&gt;
                      &lt;div class="input-group-addon"&gt;U&lt;/div&gt;
                      &lt;input type="text" class="form-control" id="socceryear" placeholder="soccer year" ng-model="ageGroupForm.socceryear"&gt; 
                  &lt;/div&gt;                               
              &lt;/div&gt;
              &lt;button type="submit" class="btn btn-info"&gt;Add&lt;/button&gt;
              &lt;button type="button" class="btn btn-default" ng-click=closeThisDialog("Cancel")&gt;Cancel&lt;/button&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the form is submitted, the 'age group' is added to the database, from the controller:</p>
  
  <pre><code>'use strict';
  
  angular.module('ma-app')
      .controller('HomeController', ['$scope', 'ngDialog', '$state', 'authService', 'coreDataService', 'userService', '$rootScope', 'clubService', 'schedulingService', function($scope, ngDialog, $state, authService, coreDataService, userService, $rootScope, clubService, schedulingService) {
  
  ...
  
      $scope.addAgeGroup = function() {
          coreDataService.addAgeGroup($scope.ageGroupForm)
              .then(function(response) {
                  coreDataService.refreshAgeGroups()
                      .then(function(response) {
                          coreDataService.setAgeGroups(response.data);
                          $scope.ageGroups = coreDataService.getAgeGroups();
                          console.log("\n\n\nretrieved age groups and put them in scope");
                          console.log($scope.ageGroups);
                          ngDialog.close();
                      }); 
              }, function(errResponse) {
                  console.log("Failed on attempt to add age group:");
                  console.log(errResponse);
              });   
      };
  </code></pre>
  
  <p>The coreDataService is defined as follows:</p>
  
  <pre><code>'use strict';
  
  angular.module('ma-app')
  
      .service('coreDataService', ['$http', 'baseURL', 'googleGeolocateBaseURL', 'googleGeocodeKey', 'googleMapsBaseURL', function($http, baseURL, googleGeolocateBaseURL, googleGeocodeKey, googleMapsBaseURL) {
          var ageGroups = {};
          var ageGroupsLoaded = false;       
  
  
          this.getAgeGroups = function() {
              return ageGroups;
          };
  
          this.setAgeGroups = function(newAgeGroups) {
              ageGroups = newAgeGroups;
              ageGroupsLoaded = true;
          };
  
          this.addAgeGroup = function(formData) {
              //post age group:            
              var postString = '{ "birth_year": "' + formData.birthyear + '", "soccer_year": "U' + formData.socceryear + '", "name": "' + formData.name + '" }';
              console.log("Posting age group with string: " + postString);
              return $http({
                  url: baseURL + 'age_groups/',
                  method: 'POST',
                  headers: {
                      'content-type': 'application/json' 
                  },
                  data: postString
              });
          };      
      }]);
  </code></pre>
  
  <p>So, when an 'age group' is added, console logging indicates that the new 'age group' is in the collection now stored in the $scope.ageGroups array, but the HTML's ng-repeat does not reflect the new 'age group'.  Only when I navigate to another tab in the interface, and then return to the tab containing the 'age groups' is the newly added 'age group' displayed.</p>