title: repeater is not updated after adding item to array
body: <p>I made a repeater in angular that shows some data from a json array.</p>
  
  <pre><code> &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
      &lt;title&gt;Suitcases&lt;/title&gt;
  &lt;/head&gt;
      &lt;body ng-controller="suitCaseController"&gt;
          &lt;h2&gt;SuitCases&lt;/h2&gt;
  
          &lt;ul class="nav"&gt;
              &lt;li&gt;&lt;a href="#addSuitcase"&gt; Add New SuitCase &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
  
          &lt;div ng-repeat="suitcase in suitcases"&gt;
              &lt;input type="checkbox" ng-model="suitcase.Locked" /&gt;    
              &lt;p ng-bind="suitcase.Locked"&gt;&lt;/p&gt;
              &lt;p ng-bind="suitcase.Wheels"&gt;&lt;/p&gt;   
          &lt;/div&gt;
  
          &lt;div ng-view&gt;&lt;/div&gt;
  
          &lt;script type="text/javascript" src="/Scripts/angular.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="/Scripts/angular-route.js"&gt;&lt;/script&gt;
          &lt;script&gt;
  
              var myApp = angular.module('myApp', ['ngRoute']);
  
              myApp.config([
                  '$routeProvider',
                  function($routeProvider) {
                      $routeProvider.
                          when('/addSuitcase', {
                              templateUrl: 'suitcase/addsuitcase',
                              controller: 'suitCaseController'
                          }).
                          otherwise({
                              redirectTo: '/'
                          });
                  }
              ]);
  
              angular.module('myApp').controller('suitCaseController', function ($scope, suitcaseRepository) {
  
                  suitcaseRepository.GetSuitcases().success(function (data) {
                      $scope.suitcases = data;
                  });
  
                  $scope.AddSuitcase = function(suitcase) {
                      console.log(suitcase);
                      $scope.suitcases.push(suitcaseRepository.AddSuitcase(suitcase));
                      console.log($scope.suitcases);
                  }
  
              });
  
              angular.module('myApp').factory('suitcaseRepository', function ($http) {
  
                  return {
                      AddSuitcase: function(suitcase) {
                          return suitcase;
                      },
                      GetSuitcases: function() {
                          var url = '/SuitCase/GetSuitcases';
                          return $http.post(url);
                      }
                  };
              });
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The form for new items is loaded through the route provider and looks like this:</p>
  
  <pre><code>&lt;form&gt;
  Locked: &lt;input type="checkbox" ng-model="suitcase.Locked" /&gt;
  Wheels: &lt;input type="text" ng-model="suitcase.Wheels" /&gt;
  &lt;button ng-click="AddSuitcase(suitcase)"&gt;Add&lt;/button&gt;
  </code></pre>
  
  <p></p>
  
  <p>If I use this form to add an item to the array, the repeater is not updating. If I paste the form in the main code then it actually adds items to the list that is shown.</p>
  
  <p>What am I missing here? Why is the repeater not updated if I use a seperately loaded view?</p>