AngularJS ng-repeat list not updating with new array values -

i'm trying learn angularjs (along ionic framework) , have got stuck because can't page reflect new items.

i use ng-repeat display items on page.

i have delete item button works.

when click delete, single item disappears off page. far.

however, when try add/push new item nothing happens. if debug in chrome , inspect timeentries array can see item being added array, page doesn't update display new item.

i don't understand why deleteitem works fine, testadd not work

simplified code below.... in html have:

<ion-list ng-controller="entriesctrl">     <ion-item ng-repeat="entry in model.timeentries">         <div class="row">             <div>{{entry.jobcode}}</div>             <div>{{entry.description}}</div>             <div>{{entry.minutesspent}}</div>         </div>          <ion-option-button ng-click="deleteitem(entry, $index)">         </ion-option-button>     </ion-item> </ion-list>   <a ng-click="testadd()">add new</a> 

in controller have:

$scope.model = {     timeentries: [         { id: 1, date: new date(), jobcode: 'jobcode.123', description: "blah blah blah", timespent: 15 },         { id: 2, date: new date(), jobcode: 'jobcode.1', description: "blah blah", timespent: 25 },         { id: 3, date: new date(), jobcode: 'jobcode.12', description: "blah blah blah", timespent: 45 },         { id: 4, date: new date(), jobcode: 'jobcode.3', description: "blah blah blah", timespent: 115 }     ] };  $scope.testadd = function () {     $scope.model.timeentries.push({ id: 5, date: new date(), jobcode: 'jobcode.1', description: "blah blah", timespent: 25 }); }  $scope.deleteitem = function (entry, index) {     $scope.model.timeentries.splice(index, 1); } 

pyetras' solution correct have follow-up question.

in app.js define page using entriesctrl

.state('app.timesheetday', {         url: "/timesheet-day/{date}",         views: {             'menucontent': {                 templateurl: "templates/timesheet-day.html",                 controller: 'entriesctrl'             }         }     }) 

because defined page use entriesctrl, thought function called page automatically in correct scope?

why wasn't testadd() firing under correct scope in above example?

after fiddling around looks if remove ng-controller attribute original testadd works fine, guess narrowing/breaking scope defining both in state config , in page attribute

your add button outside scope of controller, move inside controller element this:

<ion-list ng-controller="entriesctrl"> <ion-item ng-repeat="entry in model.timeentries">     <div class="row">         <div>{{entry.jobcode}}</div>         <div>{{entry.description}}</div>         <div>{{entry.minutesspent}}</div>     </div>      <ion-option-button ng-click="deleteitem(entry, $index)">     </ion-option-button> </ion-item> <a ng-click="testadd()">add new</a> </ion-list>