Here's the fiddle: http://jsfiddle.net/D5h7H/7/
It renders the following:
<div ng-repeat="group in Model.Groups">
<span>{{group.Name}}</span>
<div ng-repeat="filter in group.Filters">
<input type="checkbox" ng-model="filter.enabled">{{filter.Name}}
<select ng-disabled="!filter.enabled">
<option ng-repeat="value in filter.Values">{{value}}</option>
</select>
</div>
</div>
It's a list of filters that is loaded in json from the server and then rendered to the user (in an example json is generated right there in Fiddle). At the moment there are 6 groups of 30 filters in each with 15 option elements for each filter.
In Firefox it now takes about 2 seconds to redraw the UI.
Is this time ok for angular js? Is there anything I'm doing wrong that caused 2sec. rendering (cause 2000 elements doesn't look as a big number to me, but 2sec. is certainly big)?
You should look at bindonce if you don't need to update the UI after the data has been bound to it. bindonce can also wait until an object has been loaded and then do the binding. It will save you a bunch of time and reduce your $watch()es dramatically when used right.
In AngularJS 1.3+, there is One-time binding built-in:
The main purpose of one-time binding expression is to provide a way to create a binding that gets deregistered and frees up resources once the binding is stabilized. Reducing the number of expressions being watched makes the digest loop faster and allows more information to be displayed at the same time.
In order to make the one-time binding, prepend :: to the binding value:
<div>{{::name}}</div>
Also see relevant discussions:
That's due to how AngularJS does dirty checking. Here's a definitive answer to slow rendering with AngularJS.
Using this project: angular-vs-repeat will boost up your performance.
With this, the browser will render (thus angular will do its dirty-checking) to only so many elements that fit in the scrollable container where you render the elements. Demo here