Ошибка: [ng: areq] Аргумент 'ActsController' не является функцией, получил неопределенный

Я продолжаю получать ошибку: Ошибка: [ng: areq] Аргумент "ActsController" не является функцией, получившей неопределенное значение. Я видел, как у нескольких других людей были подобные ошибки, обычно из-за опечаток. Но я не думаю, что я где-то ошибся с именем контроллера.

Между прочим, я работаю с Angular и Rails.

app.js

var controllers, snowball_effect;

snowball_effect = angular.module('snowball_effect', [
    'templates', 
    'ngRoute', 
    'ngResource',
    'controllers'
]);

snowball_effect.config([
  '$routeProvider', function($routeProvider) {
    return $routeProvider
    .when('/', {
      templateUrl: "static_pages/index.html",
      controller: 'StaticPagesController'
    })
    .when('/acts/index', {
        templateUrl: "acts/index.html",
        controller: 'ActsController'
    });
  }
]);


controllers = angular.module('controllers', []);

controllers.controller("StaticPagesController", ['$scope', function($scope) {}]);
controllers.controller("ActsController", [
  '$scope', 
  '$routeParams', 
  '$location', 
  '$resource', 
  function($scope,$routeParams,$location,$resource) {
    $scope.acts = [
      {
        id: 1, 
        name: "Plant a Flower", 
        description: "Plant a flower in your garden or along the street."
        inspires: 1
      }
    ];
}]);

JavaScript/шаблоны/акты/index.html

<div class="actions_body">
  <h2>Listing Actions</h2>

  <div ng-controller="ActsController" class="body">
    <table class="row">
      <thead>
        <tr>
          <th class="col-md-offset-1 col-md-2 active">
            <label>Name</label>
          </th>
          <th class="col-md-4">Description</th>
          <th class="col-md-2">Inspires</th>
          <th colspan="2" class="col-md-2">Modify</th>
        </tr>
      </thead>
      <tbody ng-repeat="act in acts">
        <td class="col-md-offset-1 col-md-2">{{act.name}}</td>
        <td class="col-md-4">{{act.description}}</td>
        <td class="col-md-2">{{act.inspires}}</td>
        <td><a href="#">Edit</a></td>
        <td><a href="#">Delete</a></td>
      </tbody>
    </table>

    <br>

    <a href="#">New Action</a>
  </div>
</div>

Редактировать:

Теперь, когда я думаю об этом, у меня также есть еще одна проблема. Всякий раз, когда я обновляю страницу, основная часть исчезает. Я предполагаю, что этот вопрос больше Rails/Angular specific.

просмотров/дом /index.html.erb

<div ng-app="snowball_effect">
  <div class="view-container">
    <div ng-include="'layouts/index.html'"></div>
  </div>
</div>

активы/JavaScript/шаблоны/макеты/index.html

<div ng-include="'layouts/navigation.html'"></div>

<div ng-view class="view-frame animate-view"></div>

активы/JavaScript/шаблоны/static_pages/index.html

<div class="body">
  <div class="container">
    <div class="introduction">
      <h1>Welcome to Snowball Effect</h1>
    </div>
    <div class="body">
      <h2>A social media platform that brings people together in a spirit of community service.</h2>
    </div>
  </div>
</div>

Таким образом, в layout/index.html навигационная панель загружается нормально, но просмотр ng только после загрузки первой страницы.