AngularJS: Is there a better way to achieve this than the one specified?

Question

I use a template that generates a Bootstrap tab layout. Like below:

Answer 1

Use ng-include with $templateCache rather than ng-repeat. For example:

var app = angular.module('foo', []);

function foo($templateCache)
  {
  var model = 
    {"data":
     [
       {"name": "Stack",
        "desc": ["Exchange", "Overflow"]
       }
     ]
    },
    cursor, i, bar = baz = "";
  
  for (i = 0; i < model.data.length; i++)
  	{
    bar = bar.concat("
", model.data[i].name,"
");
    baz = baz.concat("
", model.data[i].desc.join().replace(/,/g,"
") );
    }
  
  $templateCache.put('name', bar);
  $templateCache.put('desc', baz);      
  }

app.run(foo);

References

• Tweak the Angular Test by Controlling the Template

• AngularJS in a Groovy World

• AngularJS Source: templateRequestSpec.js

• AngularJS Source: ngIncludeSpec.js