指令中的Angular Controller不绑定

Question

new to angular and appear to be stuck on the simplest of tasks. I have and existing application that I need to modify. I'm trying to add an additional tab to a page - the tab shows up but the content from my template does not - it also does not fire a consols.log I have in the controller

Directive:

'use strict';

angular.module('bdrApp.admin.student-transfer-directive', [])
/* bdr-student-transfer
 */
.directive('bdrStudentTransfer', [function() {
    var controller = [
        function() {
            console.log("Hello, Student Transfer");
        }
    ];

    return {
        scope: {},
        restrict: 'E',
        controller: controller,
        templateUrl: 'res/templates/admin/studentTransfer.html?v1.0'
    };
}]);

Template:

<div  class="studentTransfer" ng-show="!loading">
    <div class="">
        <strong>Coming Soon!</strong>
    </div>


</div>

app.js

  'bdrApp.admin.student-report-directive',

index.html

    <script src="directives/admin/student-transfer-directive.js"></script>

adminview.html (where the tabs are defined)

    <div ng-switch-when="resource" class="admin-resource-view">
            <bdr-admin-resource-view ></bdr-admin-resource-view>
        </div>
        <div ng-switch-when="studentTransfer" class="admin-studentTransfer-view">
            <bdr-student-transfer></bdr-student-transfer>
        </div>

Answer 1

I solved the problem following the suggestion from orange to remove the ng-switch-when tag for troubleshooting. This showed my template content on all the tabs and fired the console.log. I then put the tag back in this time not using camelCase and keeping it all lower case - works!

If someone could comment as to why this is case sensitive that would be great.

Thanks

adminView.html:

 "<div ng-switch-when="studenttransfer" class="admin-studentTransfer-view">"

adminView.js

   // Define tabs
  $scope.tabs = {
    students: {
      text: 'Manage Students',
      active: true,
    },
    teams: {
      text: 'Manage Teams',
    },
    scheduler: {
      text: 'Scheduler',
    },
    reports: {
      text: 'Reports',
      active: true
    },
    resource: {
      text: 'Resources',
      active: true
    }  ,
      studenttransfer: {
          text: 'Student Transfer',
          active: true
      }
  };