title: ngClass applying CSS while ignoring condition when page loads
body: <p>I am loading a <code>todos</code> list, every <code>todo</code> has a flag field which if <code>true</code> the <code>ng-class</code> should apply. When loading data into the page <code>ng-class</code> is applied regardless and the text shows decorated, while it should only if <code>isCompleted=true</code>.</p>
  
  <p>Th problem occurs only at the first load, because after wards I can use the checkboxes properly and <code>ng-class</code> works just fine when I play with it.</p>
  
  <p><strong>AngularJS</strong></p>
  
  <pre><code>&lt;ul id="todo-list"&gt;
          &lt;li ng-repeat="todo in todos" ng-class="{completed: todo.isCompleted}" class="editing"&gt;
                  &lt;div class="view" &gt;
                      &lt;input class="toggle" type="checkbox" ng-change="" ng-model="todo.isCompleted" ng-checked="{{todo.isCompleted}}"&gt;
                      &lt;label ng-hide="isEditing" ng-dblclick="isEditing = !isEditing"&gt;{{todo.title}}&lt;/label&gt;
                      &lt;button class="destroy" ng-click="remove(todo)"&gt;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;input class="edit" ng-show="isEditing" ng-model="todo.title" ng-blur="isEditing = !isEditing;edit(todo);"&gt;
          &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.completed {
      color: #a9a9a9;
      text-decoration: line-through;
  }
  </code></pre>
  
  <p>Thanks in advance, any help is appreciated.</p>