Decoupled controller for unit testing without depending on $scope too much

controllerTest.js

describe('Testable controller', function() {
  beforeEach(module('MyApp'));
  
  it('should be testable against the controller logic', inject(function($controller, $rootScope, ApiService) {
    var $scope = $rootScope.new();
    var controller = $controller('MyController', { $scope: $scope, ApiService: ApiService });
    
    expect(controller.generateGreeting).toBeDefined();
    var greeting = controller.generateGreeting();
    expect(greeting).toBe('...');
  }));
  
  it('should be testable against the scope bindings', inject(function($controller, $rootScope, ApiService) {
    var $scope = $rootScope.new();
    var controller = $controller('MyController', { $scope: $scope, ApiService: ApiService });
    
    expect($scope.name).toBe("world");
    $scope.getGreeting();
    expect($scope.messageToBeDisplayed).toBe('...');
  }));
});

testableController.js

var MyController = function($scope, ApiService) {
  var ctrl = this; // reference to controller
  
  // controller "private" parts
  var defaultGreeting = "Hello";

  // controller "public" logic
  this.generateGreeting = function() {
    var apiGreeting = ApiService.getDefaultGreeting();
    var prefix = apiGreeting || defaultGreeting;
    return prefix + ' ' + $scope.name;
  };

  // bindings to $scope  
  $scope.name = "world"; // default name, bound for the user to input
  $scope.messageToBeDisplayed = null;
  $scope.getGreeting = function() { // bound to a button or a ng-change directive
    $scope.messageToBeDisplayed = ctrl.generateGreeting();
  };
};
 
angular.module('MyApp').controller('MyController', MyController);