title: AngularJS Trying to use ng-click with ng-switch but ng-switch is not switching my divs
body: <p>AngNoob here. I have some global navigation that uses the routeProvider to swap out external html pages inside the view. Within the view i set up a list type sub navigation (created with ng-repeat) that switches out divs in the external html file. I can get it to load up the page if I set it manually in the appCtrl:</p>
  
  <pre><code>//Here I set the initial value
      $scope.page = 'Comfort Homes of Athens';
  </code></pre>
  
  <p>But when I click on the span that has the ng-click. I get nothing. I started to think it was a scope issue but when i put just an ng-click='alert()' it does nothing either.</p>
  
  <p>I have read around other posts but most seem to be putting a ng-click inside of an ng-switch rather than the reverse. and aren't using routing in their examples either. Still new to angular so maybe its something I haven't come across yet. </p>
  
  <p>App HTML:</p>
  
  <pre><code>&lt;body ng-app="app"&gt;
  &lt;header ng-include="header.url" ng-controller="nav"&gt;&lt;/header&gt;
  &lt;article ng-view&gt;&lt;/article&gt;
  &lt;footer ng-include="footer.url" ng-controller="nav"&gt;&lt;/footer&gt;
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/data.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/model.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>External HTML File:</p>
  
  <pre><code>&lt;div id="web" class="wrapper"&gt;
      &lt;aside class="boxModel"&gt;
          &lt;div id="controller" class="container"&gt;
              &lt;div class="topBox bluebg subNavBar"&gt;&lt;h1 class="white"&gt;Projects&lt;/h1&gt;&lt;/div&gt;
              &lt;div ng-controller="nav" id="controls" class="botBox whitebg"&gt;
                  &lt;span ng-repeat='item in webProjects' ng-click="page='{{item.name}}'"&gt;{{item.name}}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/aside&gt;&lt;section ng-switch on="page" class="boxModel"&gt;
  
          &lt;div ng-switch-when="Comfort Homes of Athens" id="sandbox" class="container round box whitebg"&gt;
             &lt;h1&gt;Here is link 1&lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div ng-switch-when="Sealpak Incorporated" id="sandbox" class="container round box whitebg"&gt;
              &lt;h1&gt;here is Link 2&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module("app", ["ngRoute"]);
  
  function nav($scope) {
      $scope.templates = templates;
      $scope.header = $scope.templates[0];
      $scope.footer = $scope.templates[1];
      $scope.mainNav = mainNav;
      $scope.footNav = footNav;
  }
  app.config(function($routeProvider) {
      $routeProvider.when('/',{
          templateUrl: "templates/home.html",
          controller: "AppCtrl"
      }).when('/templates/web.html',{
          templateUrl: "templates/web.html",
          controller: "AppCtrl"
      }).when('/templates/seo.html',{
          templateUrl: "templates/seo.html",
          controller: "AppCtrl"
      }).otherwise({
          template: "This doesn't exist!"
      });
  });
  
  app.controller("AppCtrl", function($scope) {
      $scope.webProjects = webProjects;
      $scope.seoProjects = seoProjects;
  //Here I set the initial value
      $scope.page = 'Comfort Homes of Athens';
  });
  </code></pre>