<html ng-app="test">
  <head>
    <!-- // <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
    <script src="angular-360-no-scope.js"></script>

    <script>
      var app = angular.module("test", ['angular-360-no-scope']);

      app.controller("MyController", function() {
        var ctrl = this;
        ctrl.watchCount = 0;
        ctrl.$watch("foo.bar.baz", function incrementWatchCount() {
          ctrl.watchCount++;
          ctrl.$emit("customEvent");
        });
      });

      app.run(function($rootScope) {
        $rootScope.$on("customEvent", function() { console.log("Custom event! Who wants cake?"); });
      });
    </script>
  </head>


  <body ng-controller="MyController as ctrl">
    <input ng-model="ctrl.foo.bar.baz">
    <br>
    The watch has been invoked {{ ctrl.watchCount }} times.
  </body>
</html>
