title: How can I call a service from a template in AngularJS?
body: <p>I have a service that returns a json object that it makes, for brevity lets say it looks like this:</p>
  
  <pre><code>.service ('levelService', function () {
  
      // service to manage levels.
      return  {
          levels : [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}]
      };
  
  })
  </code></pre>
  
  <p>I think that is fine, but I want to use it now, in a template.  Currently I have something like this:</p>
  
  <pre><code>&lt;ul class="dropdown-menu" ng-init="levels = [{name:'Base', href:'base'},{name:'Level 1', href:'level1'},{name:'level2', href:'level2'}];"&gt;
                        &lt;li ng-repeat="level in levels"&gt;
        &lt;a ng-href="#/modeling/level/{{level.href}}"&gt;{{level.name}}&lt;/a&gt;&lt;/li&gt;
                    &lt;/ul&gt;
  </code></pre>
  
  <p>How can I get the ng-init to now use the service?  I feel like the right thing to do, is add the service to the controller, but this is outside of any controller.  Do i need to create a new controller for this space, or can i directly reference the service?</p>