Mixing rails and angular together with lots of little angular apps. Each app has its own classes (Controllers, resources, etc) and is used like a component on any page that needs it.

0_features.html

<div ng-controller="feature.featureController" ng-init="init({projectId: <%= project.id %>})">
  <div class="animate-appear" ng-cloak ng-show="features.$resolved">
    <div class="cell cell-item cell-form-inline cell-edge-top" ng-repeat="feature in features">
      <div class="row" ng-hide="isEditing($index)">
        <div class="col-md-4">
          <div class="cell-form-inline-text">
            {{ feature.name }}
          </div>
        </div>
        <div class="col-md-8 text-right">
          <a class="btn btn-default btn-sm" ng-click="edit($index)">Edit</a>
          <a class="btn btn-default btn-sm" ng-click="delete($index)" ng-disabled="feature.isPending()">Delete</a>
        </div>
      </div>
      <div class="row" ng-show="isEditing($index)">
        <div class="col-md-4" ng-class="{'has-error': feature.errors.name}">
          <input type="text" ng-model="feature.name" class="form-control">
          <span class="help-block edge-bottom" ng-show="feature.errors.name">{{ feature.errors.name | toSentence }}</span>
        </div>
        <div class="col-md-8 text-right">
          <a class="btn btn-default btn-sm" ng-click="cancel($index)">Cancel</a>
          <a class="btn btn-success btn-sm" ng-click="update($index)" ng-disabled="feature.isPending()">Save</a>
        </div>
      </div>
    </div>
    <div class="cell cell-item cell-form-inline cell-edge-top">
      <div class="row">
        <div class="col-md-4" ng-class="{'has-error': feature.errors.name}">
          <input type="text" ng-model="feature.name" class="form-control" placeholder="Eg: user-env-compile">
          <span class="help-block edge-bottom" ng-show="feature.errors.name">{{ feature.errors.name | toSentence }}</span>
        </div>
        <div class="col-md-8 text-right">
          <a class="btn btn-success btn-sm" ng-click="create()" ng-disabled="feature.isPending()">Add</a>
        </div>
      </div>
    </div>
  </div>

  <div class="text-center animate-appear" ng-hide="features.$resolved">
    <i class="icon-spinner icon-lg"></i>
  </div>
</div>

<p class="help-block pad-top text-center">All Heroku <a href="https://devcenter.heroku.com/categories/labs">lab features</a> are supported.</p>

1_index.js

//= require ./app
//= require ./feature_controller
//= require ./feature_resource

2_app.js

(function() {
  'use strict';

  angular.module('feature', ['rails']);
})();

3_feature_controller.js

(function() {
  'use strict';

  var app = angular.module('feature');

  app.controller('feature.featureController', ['$scope', 'feature.featureResource', function($scope, featureResource) {
    $scope.feature = void(0);
    $scope.features = [];
    $scope.edits = {};
    $scope.projectId = void(0);

    $scope.init = function(options) {
      $scope.projectId = options.projectId;
      $scope.feature = new featureResource({project_id: $scope.projectId});
      $scope.features = featureResource.query({project_id: $scope.projectId});
    };

    $scope.isEditing = function(index) {
      return $scope.edits[index];
    };

    $scope.create = function() {
      $scope.feature.$create(function() {
        $scope.features.push($scope.feature);
        $scope.feature = new featureResource({project_id: $scope.projectId});
      });
    };

    $scope.delete = function(index) {
      var feature = $scope.features[index];
      feature.$delete(function() {
        $scope.features.splice(index, 1);
      });
    };

    $scope.edit = function(index) {
      $scope.edits[index] = true;
    };

    $scope.cancel = function(index) {
      delete $scope.edits[index];
    };

    $scope.update = function(index) {
      var feature = $scope.features[index];
      feature.$update(function() {
        $scope.cancel(index);
      });
    };
  }]);
})();

4_feature_resource.js

(function() {
  'use strict';

  var app = angular.module('feature');

  app.factory('feature.featureResource', ['rails.resource', function(resource) {
    return resource(
      '/projects/:project_id/features/:id.json',
      {project_id: '@project_id', id: '@id'}
    );
  }]);
})();