title: Angular-Js unable to push data into array of controller
body: <p>HTML:-</p>
  
  <pre><code>&lt;div ng-controller="countryController"&gt;
          {{name}}
           &lt;ul&gt;
              &lt;li ng-repeat="country in countries"&gt;
                  {{ country.name }}
                  &lt;ul ng-show="country.states.length &gt; 0"&gt;
                      &lt;li ng-repeat="state in country.states"&gt;
                          {{ state.name }}
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;input type="text" ng-model="newState"&gt;
                  &lt;a href ng-click="addStateState(country)"&gt;Add &lt;/a&gt;
                  {{newState}}
              &lt;/li&gt;
           &lt;/ul&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When I key in newState model it appears in client side.
  Now i try to get that value into controller and try to push in array of states, its unable to add into states array.</p>
  
  <p>JS Controller:-</p>
  
  <pre><code>myApp.factory('countryService', function($http){
  var baseUrl = 'services/'
  return {
      getCountries : function(){
          return $http.get(baseUrl + 'getcountries.php');
      }
  };
  </code></pre>
  
  <p>});</p>
  
  <pre><code>myApp.controller('countryController', function($scope, countryService){
  countryService.getCountries().success(function(data){
      $scope.countries = data;
  });
  
  $scope.addStateState = function(country){
      country.states.push({'name' : $scope.newState});
      $scope.newState = "";
  };
  </code></pre>
  
  <p>});</p>