Angular UI-router not loading my controllers

So in case it matters, I am using angular in rails. And yes my sprockets is the correct one. So my templates and routes are loading correctly. But my controllers although loading arent being found by ui-router or are being ignored. For a long time i used

ng-controller="mainctrl"

in my app to fix the problem and pushed it aside, but now i need the controller to be loaded in the routes and its not working. So here is my routes file.

app.config(['$stateProvider','$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
  $stateProvider
  // The home routes are at the top of the page.
  .state('home', { // This is our navbar, it leads to all of our login screens
    url: '/home',
    templateUrl: 'home/nav.html',
    authenticate: true,
    controller: 'AuthCtrl'
  })
.state('login', {
  url: '/login',
  templateUrl: 'home/login.html',
  authenticate: false,
  contoller: 'AuthCtrl'
//   controller: function($scope) {
//     $scope.usererror_hide = true;
//     $scope.passworderror_hide = true;
//  }
})

 $urlRouterProvider.otherwise("/login");

Now whats kind of crazy is that if i uncomment that controller:function logic it works. But for some reason it cant find my AuthCtrl. So im not sure if its a rails problem or a routes problem, because they both seem to be functioning.

this is my controller file, though i dont believe its the source of the problem.

var app= angular.module('planoxApp')


  app.controller('AuthCtrl',['$http','$scope', '$localStorage',  //be careful with the order of http/scope, they get screwey
  '$stateParams','$filter','$state','AuthService','$uibModal',
  function($http,$scope,$localStorage, $stateParams,$filter,$state,AuthService,$uibModal){

    $scope.selectedGlobal = "" //For our future global search, move it to nav
    $scope.datas = [] //For global crap, move to nav

    //My variable collections that I need access too
    $scope.usererror_hide = true;
    $scope.passworderror_hide = true;

my application.js file

//=require jquery
//=require jquery_ujs
//=require jquery-ui
//=require jquery-minicolors
//=require tinycolor
//=require bootstrap
//=require angular
//= require angular-route
//=require angular-rails-templates
//require angular-minicolors
//=require angular-animate
//=require angular-bootstrap
//require angular-bootstrap/ui-bootstrap-tpls-0.14.3.js
//=require lodash
//=require angular-resource
//=require holderjs
//=require angular-holderjs
//=require restangular
//=require angular-dragdrop
//=require angular-strap
//=require nya-bootstrap-select
//=require angular-ui-router
//=require angular-ui-router.stateHelper
//=require angular-color-picker
//= require angular-xeditable
//=require angularjs-file-upload
//=require ngstorage
//= require_tree ./templates
// = require_tree .

and my app.js file

planoxApp= angular.module('planoxApp',
['ui.router',   
'templates',   
'nya.bootstrap.select', 
'ngAnimate',
'ui.bootstrap',  
'main-directives',
'color.picker',   
'xeditable',     
'restangular', 
'ngDragDrop', 
'angularFileUpload',
'ngStorage', 
'ngHolder',
'ngResource'
// 'mgcrea.ngStrap',
// 'mgcrea.ngStrap.typeahead',
// 'mgcrea.ngStrap.tooltip',
// 'mgcrea.ngStrap.helpers.parseOptions',

])

Finally the actual html file, which is loading just fine.

<div id="login" >
  <div class="container">
    <div class="row vertical-offset-100">
    <div class="col-md-4 col-md-offset-4">
      <div class="panel panel-default">
        <div class="panel-body">
          <h1> PlanoX</h1>
          <h4> A Catchy Line About PlanoX. </h4>
          <form accept-charset="UTF-8" role="form">
                  <fieldset>
              <div class="form-group">
                <input class="form-control" placeholder="E-mail" name="email" type="text"  ng-model="login_username">
                  <p ng-hide="usererror_hide"> This email is not in our system, please try again or contact planomatic <p>
            </div>
            <div class="form-group">
              <input class="form-control" placeholder="Password" name="password" type="password" value="" ng-model="login_password">
                <p ng-hide="passworderror_hide"> This password is not in our system, please try again or contact planomatic <p>
            </div>
            <div class="checkbox">
                <label>
                  <input name="remember" type="checkbox" value="Remember Me"> Remember Me
                </label>
              </div>
            <input class="btn btn-primary btn-block" type="submit" value="Login" ng-click="CheckUser(login_username, login_password)">
          </fieldset>
            </form>
            <p>© 2015 PlanoX LLC | 888-988-PlanoX (3453) | [email protected]</p>
        </div>
    </div>
  </div>
  </div>
</div>
</div>

If anyone can help me I would really appreciate it, i have been struggling for the past week with this.

-----update-----

So it was just a typo issue, but i wanted to post another problem which i incorrectly though was the same as this one. But turned out to be totally different. This is not the correct way to access a controller in a nested view.

.state('home.index', {       // our home page for employee standard
  url: '/index',
  controller: 'HomeCtrl',
  views:{
    "":{  templateUrl: 'home/home.html'},
    "[email protected]":{  templateUrl: 'home/assembly.html'},
    "[email protected]":{ templateUrl: 'home/client.html'},
    "[email protected]":{ templateUrl: 'home/photoplan.html'}
  },
  authenticate: true
controller: 'HomeCtrl'
})

This is the correct way to access it.

 .state('home.index', {       // our home page for employee standard
      url: '/index',
      controller: 'HomeCtrl',
      views:{
        "":{  templateUrl: 'home/home.html',
              controller: 'HomeCtrl'},
        "[email protected]":{  templateUrl: 'home/assembly.html'},
        "[email protected]":{ templateUrl: 'home/client.html'},
        "[email protected]":{ templateUrl: 'home/photoplan.html'}
      },
      authenticate: true

    })

This is just in case in the future anyone sees this question and has a similar problem.