Rendering breaks on HTC M8 when using ng-repeat and pushing a new item


#1

Hi guys,

I just started using the ionic framework and I’m trying to do very simple thing:

I am using the ionic sidemenu starter and I have this html:

<ion-view title="Home">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
     <button on-tap="addLog()" class="button button-large button-block button-assertive">Add log</button>
    <div>
      <p ng-repeat="log in logs">
        {{log.message}}
      </p>
    </div>
  </ion-content>
</ion-view>

And the following JS:

.controller('DashCtrl', function($scope, $ionicPlatform) {

    var count = 0;
    $scope.logs =[];
    $scope.addLog = function() {
        $scope.logs.push({message: 'log' + count++});
    }
})

Bassically when you press the Add Log button a new log gets pushed in and should be rendered.

When I take a look at the remote debugging in chrome I see this html:

So the html is there but does not get rendered. Do you know why this is happening? Maybe I’m not using something correctly?


#2

If I use this

 <ul class="list">
      <li ng-repeat="log in logs" class="item">
        {{log.message}}
      </li>
    </ul>

there is no problem. What is the difference?