angularjs - Adding dependencies breaks data binding - ruby-on-rails

Question

I am a newcomer to angularjs and am incredibly confused as to how data-binding and dependency-injection work.
To test if the code works, I created a test expression, 5+5. It works if I don't inject dependencies inside the module, but doesn't if I inject one.
I am working with Ruby on Rails. Here is the example code
Welcome.index.erb
<div class="col-md-4 col-md-offset-2">
<ul class="list-inline" ng-app="my-app" ng-controller="HomeCtrl">
<li><a ng-href="/api/auth/sign_in">Sign In</a></li>
<li><a ng-href="/api/auth/sign_up">Sign Up</a></li>
<li>Help</li>
<li>{{5+5}}</li>
</ul>
</div>
<script>
angular.module("my-app", [])
.controller("HomeCtrl", function($scope) {
$scope.number = 1;
});
</script>
This works, tested by the data-binding expression {{5+5}} evaluating to 10. However, if I add a dependency injection to my module
angular.module("my-app", ['ngRoute'])
.controller("HomeCtrl", function($scope) {
$scope.number = 1;
});
.controller("UserRegistrationsCtrl", ['$scope', function($scope) {
});
.controller("UserSessionsCtrl", ['$scope', function($scope) {
});
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/welcome/index.html.erb',
controller: 'HomeCtrl'
})
.when('/sign_in', {
templateUrl: 'views/user_sessions/new.html',
controller: 'UserSessionsCtrl'
})
.when('/sign_up', {
templateUrl: 'views/user_registrations/new.html',
controller: 'UserRegistrationsCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
the data-binding looks like it gets broken, and the list item gets rendered as {{5+5}}.
user_sessions/new.html
<form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}">
<div class="form-group">
<label for="email">Email</label>
<input type="email"
name="email"
id="email"
ng-model="loginForm.email"
required="required"
class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
name="password"
id="password"
ng-model="loginForm.password"
required="required"
class="form-control">
</div>
<button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</form>
user_registrations.html
<form ng-submit="handleRegBtnClick()" role="form" ng-init="registrationForm = {}">
<div class="form-group">
<label for="email">Email</label>
<input type="email"
name="email"
id="email"
ng-model="registrationForm.email"
required="required"
class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
name="password"
id="password"
ng-model="registrationForm.password"
required="required"
class="form-control">
</div>
<div class="form-group">
<label for="password_confirmation">Password confirmation</label>
<input type="password"
name="password_confirmation"
id="password_confirmation"
ng-model="registrationForm.password_confirmation"
required="required"
class="form-control">
</div>
<button type="submit" class="btn btn-primary btn-lg">Register</button>
</form>
Not sure why the data-binding was broke. Any help will be appreciated.
Update
I went into the Console in Chrome Developer Tools, and ran a couple commands
var listElement = document.querySelector('ul')
listElement
=><ul class="list-inline" ng-app="my-app" ng-controller="HomeCtrl">...
listElement.controller();
=>TypeError: undefined is not a function
listElement.injector();
=>TypeError: undefined is not a function
Here are the scripts I'm using
<script src="/assets/jquery-7f1a72dc175eaa60be2e692ab9e6c8ef.js?body=1"></script>
<script src="/assets/jquery_ujs-68ce8f5ee2895cae3d84a114fdb727e1.js?body=1"></script>
<script src="/assets/bootstrap-3dfec047bf3f975670c20b5e35a5f42e.js?body=1"></script>
<script src="/assets/angular/angular-8bf873ad356fbb7267e223d5cac348f5.js?body=1"></script>
<script src="/assets/angular-8bf873ad356fbb7267e223d5cac348f5.js?body=1"></script>
<script src="/assets/angular-cookie/angular-cookie-79e90f9112d0e1bf9aede30a4b7f5d36.js?body=1"></script>
<script src="/assets/angular-cookie-79e90f9112d0e1bf9aede30a4b7f5d36.js?body=1"></script>
<script src="/assets/angular-bootstrap/ui-bootstrap-tpls-2d5fe21018866bf67cca9784e2ae95a9.js?body=1"></script>
<script src="/assets/angular-bootstrap-2d5fe21018866bf67cca9784e2ae95a9.js?body=1"></script>
<script src="/assets/angular-messages/angular-messages-f8b337aaacde7f3ee4d9fd590f36749a.js?body=1"></script>
<script src="/assets/angular-messages-f8b337aaacde7f3ee4d9fd590f36749a.js?body=1"></script>
<script src="/assets/angular-resource/angular-resource-79e25fff913ab31c097086ac463d7d41.js?body=1"></script>
<script src="/assets/angular-resource-79e25fff913ab31c097086ac463d7d41.js?body=1"></script>
<script src="/assets/angular-ui-router/angular-ui-router-1c9044ef4d22b7d3b266e72a34c275ea.js?body=1"></script>
<script src="/assets/angular-ui-router-1c9044ef4d22b7d3b266e72a34c275ea.js?body=1"></script>
<script src="/assets/angular-ui-utils/ui-utils-895ce7dcab9d6b51db05d3816862b02c.js?body=1"></script>
<script src="/assets/angular-ui-utils-895ce7dcab9d6b51db05d3816862b02c.js?body=1"></script>
<script src="/assets/ng-token-auth/ng-token-auth-1e86f8812a656893f8b8ee6fe807290d.js?body=1"></script>
<script src="/assets/ng-token-auth-1e86f8812a656893f8b8ee6fe807290d.js?body=1"></script>
<script src="/assets/angular/app-b06dbf3801b44bee508a1fea1255119d.js?body=1"></script>
<script src="/assets/application-b2f074707bb9272eab9330966cfe5014.js?body=1"></script>
My application.js.coffee
#= require jquery
#= require jquery_ujs
#= require bootstrap
#= require angular
#= require angular-cookie
#= require angular-bootstrap
#= require angular-messages
#= require angular-resource
#= require angular-ui-router
#= require angular-ui-utils
#= require ng-token-auth
#= require_tree

Answer 1

For one thing, you are placing semi-colons where you shouldn't be. You are breaking your method chains.
angular.module('my-app', ['ngRoute'])
.controller('HomeCtrl', function($scope) {
...
})
.controller('UserRegistrationsController', ['$scope', function($scope) {
...
}])
.controller('UserSessionsController', ['$scope', function($scope) {
...
}])
.config(['$routeProvider', function($routeProvider) {
...
}]);
I don't know that this would be your entire issue, but update your code accordingly, look at your console and report the errors coming out there.

Answer 2

The problem was related to my Gemfile and Assets. I had the following gem installed
gem "rails-assets-angular-ui-router"
I needed to add
gem "rails-assets-angular-route"
then add
#= require angular-route
to my application.js.coffee file