AngularJS directive not showing up on template

I've got a tiny problem with an angular directive that's now working and I don't know why. I think it's a fairly simple issue that I'm overlooking, maybe you can help me out. Directive is defined like this: ``` angular.module('directives', []) .directive('my-directive', function () { return { restrict: 'AE', scope: { name: '=name' }, template: '<h1>{{name}}</h1>' }; }); ``` Then index.cshtml: ``` <my-directive name="test"></my-directive> ``` Application.js: ``` var app = angular.module('MyApp', [ ..., 'directives' ]); ``` And here's controllers.js ``` angular.module('controllers', ['apiServices', 'directives']) .controller('homecontroller', function($scope, $resource, webApiService, $log, $translate, $localStorage, $sessionStorage) { ``` Ok confirmed that directives.js is loaded, otherwise application.js nags about 'unknown module'. There are no error messages in the console, the thing just doesn't show. Any ideas? EDIT So as pointed out, I changed the directive name to camelCase, but still no luck: ``` <my-directive name="John Doe"></my-directive> ``` And ``` .directive('myDirective', function () { ``` But nothing is showing yet. EDIT Problem is that angular expects an object to be passed into the attribute, not a string literal. If you create an object person = { name: 'John' }, pass the person in, then write {{ person.name }} ( assuming we named the attribute person + scope var person too ).