AngularJS: tabbing performance with Google Code Prettify

Question

I've built a simple tabbed code viewer using Google Code Prettify in AngularJS but I'm having an issue with slow performance when clicking through the tabs (as well as when performing other actions).

Here is the relevant plunker: http://plnkr.co/edit/x25vea?p=preview

index.html:

<div class="tabs" ng-controller="TabController as panel">

  <ul class="nav-list">
    <li ng-repeat="fileName in post.custom_fields | fileNames">
      <a href="" ng-class="{selected: panel.isSelected($index)}" ng-click="panel.setTab($index)" ng-cloak>{{fileName[0]}}</a>
    </li>
  </ul>

  <div ng-repeat="code in post.custom_fields | codeSnippets" ng-show="panel.isSelected($index)">
    <pre class="prettyprint" ng-bind-html="code | prettyprint"></pre>
  </div>

</div>

TabController:

app.controller('TabController', ['$scope', function ($scope) {
    this.tab = 0;

    this.setTab = function (setTab) {
        this.tab = setTab;
    };
    this.isSelected = function (checkTab) {
        return this.tab === checkTab;
    };
}]);

Filter:

app.filter('prettyprint', function () {
    return function (text) {
        return prettyPrintOne(text, '', true);
    };
});

I feel the tabbing could be instantaneous but I don't know how to go about doing what I'm doing in any different or better way.

Any help would be greatly appreciated. Thanks!

Answer 1

I suspect filter may be evaluated each time angular is updating HTML. Try call it just once in code:

this.codePretty = $filter('prettyprint')(this.code);

And then:

<pre class="prettyprint" ng-bind-html="codePretty"></pre>