Aura:iteration not showing updated values

Question

I was playing with lightning and i stumbled upon this. I declared an attribute of type list and iterated it through using aura:iteration.

I created a button that will add elements to the attribute. But i cannot see aura:iteration reflecting the updated values back.

Am I doing something wrong?

<aura:component >
  <aura:attribute name="AccountList" type="Integer[]"/>
  <h1>Size is {!v.AccountList.length}</h1>
  <aura:iteration items="{!v.AccountList}" var="Acc" >
    {!Acc}
  </aura:iteration>

  <ui:button label="Add" press="{!c.addAccount}"></ui:button>
</aura:component>

({
   addAccount : function(component, event, helper) {
      console.log('Press called');
      var accList=component.get('v.AccountList');
      accList.push(0)
      console.log('component updated'+accList.length); 
   }
})

{!v.AccountList.length} is always showing 0.

Answer 1

You will have to assign the accList back to the aura:attribute after pushing elements.

var accList=component.get('v.AccountList');
    accList.push(0);//you are updating the local instance of the list, not the actual attribute.
component.set('v.AccountList', accList);//updating the aura:attribute.