Binding to array of primitives and ng-repeat

by yoorek

HTML

<div ng-controller="bookCtrl">
    // without track by $index input looses focus
    // because each change makes ng-repeat to rebuild
    // with ng-model = "tag" nothing changes in parent array
    // binding to primitives - it can be solved by
    // changing tags to array of objects
    <div ng-repeat="tag in book.tags track by $index">
        <input type="text" ng-model="book.tags[$index]"/>
    </div>
    
    My tags are <b>really</b>: {{ book.tags }}
</div>

JavaScript

angular.module('myApp', [])
.controller('bookCtrl', function($scope) {
    $scope.book = {
        name: 'A Game of Thrones',
        tags: [
            'Tyrion',
            'John Snow',
            'Arya',
            'Sean Bean'
        ]
    };
});