title: ng-click event is not firing on span element
body: <p>Why is the ng-click not working in the code below?
  It should be simple. What am I missing.
  Thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
      'use strict';
      // Set up the app.
      var mainApp = angular.module('mainApp', []);
  
      // Create a controller.
      mainApp.controller('navController', ['$scope', '$log' ,function($scope, $log) {
          //$scope.firstName= "John";
          //$scope.lastName= "Doe";,
          $scope.openTab = function (tabNumber) {
              $log.log(tabNumber);
          };
  
          var s =1;
      }]);
  }());</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script src="/js/angular.js"&gt;&lt;/script&gt;
          &lt;script src="/js/app/app.js"&gt;&lt;/script&gt;
  
          &lt;link rel="stylesheet" href="/css/styles.css" /&gt;
  
      &lt;/head&gt;
      &lt;body ng-app="mainApp"&gt;
          &lt;div class="navigation" ng-controller="navController as nc"&gt;
              &lt;!--&lt;p&gt;Name: &lt;input type="text" ng-model="name"&gt;&lt;/p&gt;
              &lt;p ng-bind="name"&gt;&lt;/p&gt;
              &lt;p&gt;{{name}}&lt;/p&gt;
              --&gt;
              &lt;span ng-click="nc.openTab(1)" class="btn"&gt; tab 1&lt;/span&gt;
              &lt;span ng-click="nc.openTab(2)" class="btn"&gt; tab 2&lt;/span&gt;
              &lt;span ng-click="nc.openTab(3)" class="btn"&gt; tab 3&lt;/span&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>