Testing $watch

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  var vm = this;
  var previousSelection = null;
  
  
  vm.currentSelection = null;
  
  $scope.$watch('vm.currentSelection', function(newVal, oldVal){
    previousSelection = oldVal;
  });
  
  vm.changeSelection = function(shouldRevert){
    if(shouldRevert){
      vm.currentSelection = previousSelection;
    }
  };
  
});

app.controller('ScopeCtrl', function($scope) {
 var previousSelection = null;
  
  
  $scope.currentSelection = null;
  
  $scope.$watch('currentSelection', function(newVal, oldVal){
    previousSelection = oldVal;
  });
  
  $scope.changeSelection = function(shouldRevert){
    if(shouldRevert){
      $scope.currentSelection = previousSelection;
    }
  };
  
});

describe('Testing $watch expressions', function() {
  var $scope = null;
  var ctrl = null;

  //you need to indicate your module in a test
  beforeEach(module('plunker'));

  describe('using the controller as syntax', function() {

    beforeEach(inject(function($rootScope, $controller) {
      $scope = $rootScope.$new();

      ctrl = $controller('MainCtrl', {
        $scope: $scope
      });
      $scope.vm = ctrl;

    }));

    it('test using $digest', function() {
      // make an initial selection
      ctrl.currentSelection = 'Hi';
      $scope.$digest();

      // make another one
      ctrl.currentSelection = 'New';
      $scope.$digest();

      // simulate a ng-change which should revert to the previous value
      ctrl.changeSelection(true);

      expect(ctrl.currentSelection).toEqual('Hi');
    });



    it('test using $scope.$apply(...)', function() {
      // make an initial selection
      $scope.$apply('vm.currentSelection="Hi"');

      // make another one
      $scope.$apply('vm.currentSelection="New"');

      // simulate a ng-change which should revert to the previous value
      ctrl.changeSelection(true);

      expect(ctrl.currentSelection).toEqual('Hi');
    });


  });


  describe('using the $scope syntax', function() {

    beforeEach(inject(function($rootScope, $controller) {
      $scope = $rootScope.$new();

      ctrl = $controller('ScopeCtrl', {
        $scope: $scope
      });

    }));

    it('test using $digest', function() {
      // make an initial selection
      $scope.currentSelection = 'Hi';
      $scope.$digest();

      // make another one
      $scope.currentSelection = 'New';
      $scope.$digest();

      // simulate a ng-change which should revert to the previous value
      $scope.changeSelection(true);

      expect($scope.currentSelection).toEqual('Hi');
    });



    it('test using $scope.$apply(...)', function() {
      // make an initial selection
      $scope.$apply('currentSelection="Hi"');

      // make another one
      $scope.$apply('currentSelection="New"');

      // simulate a ng-change which should revert to the previous value
      $scope.changeSelection(true);

      expect($scope.currentSelection).toEqual('Hi');
    });


  });



});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS test</title>
    <link data-require="jasmine" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
    <script data-require="json2" data-semver="0.0.2012100-8" src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
    <script data-require="jasmine" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
    <script data-require="jasmine" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script>
    <script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script>
    <script data-require="angular.js" data-semver="1.3.0-rc.4" src="https://code.angularjs.org/1.3.0-rc.4/angular.js"></script>
    <script data-require="angular-mocks" data-semver="1.3.0-rc.4" src="https://code.angularjs.org/1.3.0-rc.4/angular-mocks.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
    <script src="appSpec.js"></script>
    <script src="jasmineBootstrap.js"></script>
    <!-- bootstraps Jasmine -->
  </head>

  <body>
    <div id="HTMLReporter" class="jasmine_reporter"></div>
  </body>

</html>

(function() {
  var jasmineEnv = jasmine.getEnv();
  jasmineEnv.updateInterval = 250;

  /**
   Create the `HTMLReporter`, which Jasmine calls to provide results of each spec and each suite. The Reporter is responsible for presenting results to the user.
   */
  var htmlReporter = new jasmine.HtmlReporter();
  jasmineEnv.addReporter(htmlReporter);

  /**
   Delegate filtering of specs to the reporter. Allows for clicking on single suites or specs in the results to only run a subset of the suite.
   */
  jasmineEnv.specFilter = function(spec) {
    return htmlReporter.specFilter(spec);
  };

  /**
   Run all of the tests when the page finishes loading - and make sure to run any previous `onload` handler

   ### Test Results

   Scroll down to see the results of all of these specs.
   */
  var currentWindowOnload = window.onload;
  window.onload = function() {
    if (currentWindowOnload) {
      currentWindowOnload();
    }

    //document.querySelector('.version').innerHTML = jasmineEnv.versionString();
    execJasmine();
  };

  function execJasmine() {
    jasmineEnv.execute();
  }
})();

/* restore "body" styling that were changes by "jasmine.css"... */
body { background-color: white; padding: 0; margin: 8px; }
/* ... but remain the "jasmine.css" styling for the Jasmine reporting */
.jasmine_reporter { background-color: #eeeeee; padding: 0; margin: 0; }