title: need to store a service/factory as a value
body: <p>I feel I'm stuck in figuring out a resolution to my mvc.NET / angularjs project.</p>
  
  <p>Currently I feel I did a great job by abstracting the view to use a controller that's the the type name of the controller.cs specific class for example:</p>
  
  <pre><code>&lt;body ng-controller="@Model.ControllerType.Name"&gt;
  ...
  &lt;/body&gt;
  </code></pre>
  
  <p>this is the controller</p>
  
  <pre><code>superSiteApp.controller("MediaController", ["$scope", "$window", "SubNavFactory", function ($scope, $window, SubNavFactory) {
           ...
  });
  </code></pre>
  
  <p>This work seems to work out great, but recently I've been struggling with subnav related items. With one section I basically brute force it (because it isn't a service like so) In this case I'm setting up a factory:</p>
  
  <pre><code>var superSiteApp = angular.module('superSiteApp', []);
  superSiteApp.factory("SubNavFactory", ["subNavCollectionWrapper", function (subNavCollectionWrapper) {
      return {
          get: function() {
              return subNavCollectionWrapper.get();
          }
      };
  }]);
  </code></pre>
  
  <p>Later I push it in here like so: </p>
  
  <pre><code>@section AdditionalHeaderLinks
  {
      &lt;script language="javascript" type="text/javascript"&gt;
          superSiteApp.value("subNavCollectionWrapper", {
              get: function() {
                  return @Html.Raw(Json.Encode(Model.Menus[1].Links));
              }
          });
      &lt;/script&gt;
  }   
  </code></pre>
  
  <p>This part works great, but now I need to do one where I call the api.</p>
  
  <p>So the idea is something like:</p>
  
  <pre><code>superSiteApp.service("SubNavFactoryUri", ["$http", "uri", function ($http, uri){
      return $http.get(uri);
  }]);
  </code></pre>
  
  <p>This is where I'm lost. In my new View.chtml file, I don't know how to make that connection work.</p>
  
  <pre><code>@section AdditionalHeaderLinks
  {
      &lt;script language="javascript" type="text/javascript"&gt;
          superSiteApp.value("subNavCollectionWrapper",  /* this is my struggle */);
      &lt;/script&gt;
  } 
  </code></pre>
  
  <p>I can't figure out how to reference the service to pass it in. Yes, I could create a function class on my own, but I thought I'd leverage angularjs. </p>
  
  <p>Maybe the approach is incorrect here, as it's the only thing I could think of doing. Any advice would be greatly appreciated.</p>
  
  <p>Thanks</p>