Add new Row in editable state

I have a simple repeater in which each row can be edited in-line. As part of that repeater, when I add a new row I would like it to be in the editable state, not static. When I tried adding the $scope.editable = true to the Add Button, it makes the entire repeater editable.

Here's a plunker illustrating my code: http://plnkr.co/edit/tVOLYm2mg5be2L6NpM6k?p=preview

$scope.addRow = function() {
    $scope.accounts.unshift({ name: 'Enter Name', id: 'Enter ID', code: 'Enter Code'});
    //$scope.editable = true;
}

Can anyone assist with what I'm trying to accomplish?

thanks

$scope.editable = false;

This statement sets the editable value in the parent scope and ng-repeat makes child scope for every repeat. You need to understand that concept. Look at this question to understand that.

Now, a better way to implement what you want to do is by adding a new property to every account object in your accounts array that makes a row editable or non editable.

So whenever unshifting an account, do as follows:

 $scope.accounts.unshift({
      name: 'Enter Name',
      id: 'Enter ID',
      code: 'Enter Code',
      editable: true
  });

and in html, instead of using editable, use account.editable

You don't need to add editable property to your existing data as non-existent properties are implicitly falsy, so your grid will automatically be in non-editable mode initially.