AngularJs. Change model in directive too slow

Question

As a newbie in AngularJs can't understand the problem.

This is a simple example that shows the action. Actually about 50 items and after clicking on "Without the string" after clicking on the elements "String #" to visually remove the item takes about 1-2 seconds.

Fiddle

I have the controller code:

testApp.controller('TestController', ['$scope', function ($scope) {

    $scope.category = [
       {id:1, name: "Category 1"},
       ...
    ];

    $scope.items = [
       {id: 1, category: {id: 1},name: "Test 1"},
       ...
    ];

    $scope.list = [
        {id: 1,name: "String 1"}
        ...
    ];

    angular.forEach($scope.category, function(categoryItem, i) {
      categoryHash[categoryItem.id] = i;
    });

    angular.forEach(menuItems, function(item) {
      var catCategory = categoryHash[item.category.id];
      if (!$scope.category[catCategory].items) {
        $scope.category[catCategory].items = [];
      }
      $scope.category[catCategory].items.push(item);
    });

}])

Directive code:

.directive('listItems', function() {
    return {
        restrict: 'E',
        scope: {
            listArray: '=',
            listItemId: '=',
            listFlag: '='
        },
    template: '<ul>' +
        '<li ng-repeat="listStr in listArray track by listStr.id">' +
        '<input type="radio" ' +
            'id="list_{{ listItemId }}_{{ listStr.id }}" name="list_{{ listItemId }}" ' +
            'ng-model="$parent.$parent.item.string" ng-value="listStr" ng-change="stringSelect()">' +
         '<label for="list_{{ listItemId }}_{{ listStr.id }}" ng-bind="listStr.name"></label>' +
      '</li>' +
      '<li>' +
         '<input type="radio" ' +
              'id="list_{{ listItemId }}_0" name="list_{{ listItemId }}" ' +
              'ng-model="$parent.$parent.item.string" ng-value="" ng-change="stringSelect()">' +
         '<label for="list_{{ listItemId }}_0">Without string</label>' +
        '</li>' +
    '</ul>',
    link: function(scope, iElement, iAttrs) {
        scope.stringSelect = function() {
            scope.listFlag = false;
      };
    }
  }
})

Template:

<div ng-app="test" ng-controller="TestController">
  <div ng-repeat="collection in category track by $index" >
  <h3 ng-bind="collection.name"></h3>
  <ul>
    <li ng-repeat="item in collection.items track by $index">
      <strong ng-bind="item.name"></strong>
      <span ng-if="item.string" ng-bind="item.string.name"></span>
      <button ng-click="addString = true" ng-hide="addString">Add String</button>
      <div ng-if="addString">
        <list-items 
                    list-array="list" 
                    list-item-id="$parent.item.id"
                    list-flag="$parent.addString"></list-items>
      </div>
    </li>
  </ul>
  </div>
</div>

Answer 1

First remove all $parent, they're not needed, angular will look for value in the parent scope himself and if your directive is used inside others directive, this won't even point to the right scope.

2nd with angular you can create a lot of watches, this can slow down really your application :

1. when angular watch for list, he watches for deep inspection. This may slow down as hell things when you have some list with complex objects.
2. When you use {{}} or ng-bind, it creates a watch

3 : Are you using an old version of IE ? i think the 8 one was really slow with angular 1.2 and scopes.

So you may try to not use default watch for array but handle it yourself watching only for length for instance. For the {{}} part, since 1.3 you can prefix your binding by '::' to have a One time binding (https://docs.angularjs.org/#!/guide/expression) so he won't watch for changes

4 : When you use ng-if it destroy the object when not needed and recreate it when the condition is true again maybe you should use ng-show instead ng-if there

 <div ng-if="addString">