Ошибка: [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/templates/acts/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.

просмотры/дом/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-view только после загрузки первой страницы.