Scope Templates - Storing HTML Element in Scope as Template

Templates are usually HTML elements with extra attributes, which are used by Atoms.js Template System. Apart from inline templates, scope templates gives you advantage of changing templates at runtime.

Once atom-template-name attribute is applied to any element, element is then removed from the DOM and stored as template in scope. You can bind any template of any control to $scope.templateName as shown below. In the following example, $scope[$scope.view] determines the template to be used at runtime. Toggle button bar changes the selected template name, that causes atom-item-template to be set to new value and all items are now rendered with new template. Scope Template can contain any atom controls as well, just like inline templates.