Angular Factory Service Issue, Unknown Provider
<p>The generator I used to set up my angular project has everything coded in short hand and distributed oddly so I'm working through trying to get my old project into their form so when I build it the project will deploy my scripts correctly.</p>

<p>So my current issue is that I had my controllers in my old project communicating with each other to pass a id from my main controller to my gallery controller. I did this all through a parent controller. Now when I make the leap to this new format it seems that it wont work the same way and I should probably use a service instead.</p>

<p>With all this being said I'm having a problem with my service through my current set up. For what ever reason no matter what I do my service isn't defined in my project. I realized my project injector is placing my service file behind my controller files for what ever reason I figured this would be the issue but I tried placing the code with in my routes file and still had the problem.</p>

<p>If someone could look over my code and check whats wrong and maybe even give me a little insight on how to pass a ID from my main to my gallery I'd be very grateful!</p>

<p>Thanks</p>

<p>Service.js</p>

<pre><code>(function() {
</code></pre>

<p>'use strict';</p>

<p>angular
    .module('bhamDesign')
    .factory('mainService', mainService)</p>

<p>function mainService(){
    var main;</p>

<pre><code>var mainService = {
  setMain: function(input) {
    main = input;
  },
  getMain: function() {
    return main;
  }
    };
    return mainServices;
  }

})();
</code></pre>

<p>Module.js</p>

<pre><code>(function() {
  'use strict';

  angular
    .module('bhamDesign', ['ngTouch', 'ngSanitize', 'ngAria', 'ngResource', 'ui.router', 'mm.foundation']);

})();
</code></pre>

<p>Route.js</p>

<pre><code>    (function() {
  'use strict';

  angular
    .module('bhamDesign')
    .config(routerConfig);

  /** @ngInject */
  function routerConfig($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/main/main.html',
        controller: 'MainController',
        controllerAs: 'main'
      })
      .state('gallery', {
        url: '/mainId',
        templateUrl: 'app/gallery/gallery.html',
        controller: 'GalleryController',
        controllerAs: 'gallery'
      });

    $urlRouterProvider.otherwise('/');
  }

})();
</code></pre>

<p>MainController.js</p>

<pre><code>    (function() {
  'use strict';

  angular
    .module('bhamDesign')
    .controller('MainController', MainController);

  function MainController($scope, mainService, $http, $state) {

  $http.get('../../assets/json/projects.json').success(function(data){
    $scope.mains = data;
  });

  $scope.orderProp = '-year';

  $scope.setId = function(){
    mainServices.setMain($scope.id);
    $state.go('gallery');
  };
}

})();
</code></pre>

<p>GalleryController.js</p>

<pre><code>    (function() {
  'use strict';

  angular
    .module('bhamDesign')
    .controller('GalleryController', GalleryController);

  function GalleryController($scope, $state, $http) {
    $http.get('.../.../assets/json/galleries/' + mainServices.getMain() + '.json').success(function(data) {
        $scope.gallery = data;
    });
  }

})();
</code></pre>

<p>Main.html</p>

<pre><code>    .row
  .small-12.medium-3.columns.left(ng-repeat="main in mains | orderBy:orderProp | filter:categoryFilter:true")
    .thumbnail-container   
      a(ng-click="setId")
        img.thumbnail(ng-src="{{main.thumbnail}}")
        .text 
          h5 {{main.title}}
          h6 {{main.year}}
</code></pre>

<p>Error Message</p>

<pre><code>ReferenceError: mainServices is not defined
    at Object.mainService (http://localhost:3000/app/index.service.js:19:12)
    at Object.invoke (http://localhost:3000/bower_components/angular/angular.js:4604:19)
    at Object.enforcedReturnValue [as $get] (http://localhost:3000/bower_components/angular/angular.js:4443:37)
    at Object.invoke (http://localhost:3000/bower_components/angular/angular.js:4604:19)
    at http://localhost:3000/bower_components/angular/angular.js:4403:37
    at getService (http://localhost:3000/bower_components/angular/angular.js:4550:39)
    at injectionArgs (http://localhost:3000/bower_components/angular/angular.js:4574:58)
    at Object.instantiate (http://localhost:3000/bower_components/angular/angular.js:4616:18)
    at http://localhost:3000/bower_components/angular/angular.js:9870:28
    at http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4081:28 &lt;div ui-view="" class="ng-scope"&gt;(anonymous function) @ angular.js:13236(anonymous function) @ angular.js:9965invokeLinkFn @ angular.js:9494nodeLinkFn @ angular.js:8978compositeLinkFn @ angular.js:8226publicLinkFn @ angular.js:8106(anonymous function) @ angular.js:8447updateView @ angular-ui-router.js:4021(anonymous function) @ angular-ui-router.js:3959Scope.$broadcast @ angular.js:17143$state.transition.resolved.then.$state.transition @ angular-ui-router.js:3352processQueue @ angular.js:15552(anonymous function) @ angular.js:15568Scope.$eval @ angular.js:16820Scope.$digest @ angular.js:16636Scope.$apply @ angular.js:16928done @ angular.js:11266completeRequest @ angular.js:11464requestLoaded @ angular.js:11405
</code></pre>