ng-click event is not firing on span element
<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>