title: ng-click function inside controller does not work
body: <p>I'm trying to make a three tab app using routeProvider ng-view and 3 controllers. I've made one main HTML page and 3 tab HTML pages. Switching tabs works OK and I can access variables inside tab one; however, I cant access the functions declared inside the controller. Where is the problem?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="project"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Tabs&lt;/title&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
      &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
      &lt;link href="css/app.css" rel="stylesheet"&gt;
      &lt;script src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="js/tbb.js"&gt;&lt;/script&gt;
  
  
  &lt;/head&gt;&lt;body&gt;
  
  
  &lt;div class="tabtable"&gt;
      &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;
              &lt;a href="#/tab1" data-toggle="tab"&gt;Tab1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#/tab2" data-toggle="tab"&gt;Tab2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#/tab3" data-toggle="tab"&gt;Tab3&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="tab-content"&gt;
          &lt;div class="tab-content"&gt;
              &lt;!--tabs content--&gt;
              &lt;div ng-view&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the JavaScript code:</p>
  
  <pre><code>angular.module('project',[]).
      config(function($routeProvider) {
          $routeProvider.
              when('/', {controller:Ctrl1, templateUrl:'tbb_1.html'}).
              when('/tab1', {controller:Ctrl1, templateUrl:'tbb_1.html'}).
              when('/tab2', {controller:Ctrl2, templateUrl:'tbb_2.html'}).
              when('/tab3', {controller:Ctrl3, templateUrl:'tbb_3.html'}).
              otherwise({redirectTo:'/'});
      })
      .run( function($rootScope, $location) {
  
          $rootScope.var1=1;
          //alert($rootScope.var1);
          // register listener to watch route changes
          $rootScope.$on( "$routeChangeStart", function(event, next, current) {
                  //alert('change');
  
  
  
          });
      });
  
  
  
  function Ctrl1($scope,$rootScope) {
  
  $scope.var2=$rootScope.var1;
  
  function dodo1(){
      alert('23');
  }
  
  $rootScope.$on('$routeChangeStart', function(event, next, current) {
          //alert('change inside ctrl');
      //alert(form.supervisor.$dirty);
      });
  
  }
  
  function Ctrl2($scope,$rootScope) {
  }
  
  function Ctrl3($scope,$rootScope) {
  }
  </code></pre>
  
  <p>tbb_1.html</p>
  
  <pre><code>&lt;h2&gt;tab1&lt;/h2&gt;
  {{2+2}}&lt;br&gt;
  |{{var1}}|&lt;br&gt;
  |{{form.var1.$dirty}}|
  &lt;a href="" ng-click="var1=8;"&gt;property&lt;/a&gt;
  &lt;a href="" ng-click="dodo1();"&gt;dodo&lt;/a&gt;
  &lt;button class="btn btn-mini" ng-click="dodo1()"&gt;buu&lt;/button&gt;
  &lt;form class="form-horizontal" novalidate name="form" ng-submit="submit()"&gt;
      &lt;fieldset&gt;
      &lt;input id="var1" name="var1" placeholder="" class="input"
                 type="text" ng-model="var1"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Why does clicking dodo and the button do nothing?</p>