why is push not updating the list - html

Question

javascript
$scope.addCustomer = function() {
$scope.customers=[{name:'bob',city:'delhi'},{name:'david',city:'bombay'}];
$scope.customers.push({name:$scope.newCustomer.name,city:$scope.newCustomer.city
}
html
<br/>
Customer name :<br />
<input type="text" ng-model="newCustomer.name" />
<br/>
Customer city :<br />
<input type="text" ng-model="newCustomer.city" />
<button ng-click="addCustomer()">Add customer</button>
I tried listing all the customer names in an unordered list but the new customer is not getting added to the list.
How can i add the niew customer to the list ?

Answer 1

Try this:
$scope.customers=[{name:'bob',city:'delhi'},{name:'david',city:'bombay'}];
$scope.addCustomer = function() {
$scope.customers.push({name:$scope.newCustomer.name,city:$scope.newCustomer.city});
}
Working exmaple: http://jsfiddle.net/bateast/aVWpQ/

Answer 2

Don't assign value to $scope.customers in addCustomer().
You can try this:
<div ng-controller="test">
Customer name :<br />
<input type="text" ng-model="newCustomer.name" />
<br/>
Customer city :<br />
<input type="text" ng-model="newCustomer.city" />
<button ng-click="addCustomer()">Add customer</button>
<table>
<thead>
<tr>
<th>name</th>
<th>city</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="customer in customers">
<td>{{customer.name}}</td>
<td>{{customer.city}}</td>
</tr>
</tbody>
</table>
</div>
<script>
function test($scope){
$scope.customers=[{name:'bob',city:'delhi'},{name:'david',city:'bombay'}];
$scope.addCustomer = function(){
$scope.customers.push({name:$scope.newCustomer.name,city:$scope.newCustomer.city});
alert($scope.customers.length)
}
}
</script>