AngularJS directive not showing up on template

Question

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 ).

Answer 1

During normalization, Angular converts - delimited name to camelCase.

So use camelCase while specifying the directive inside JS:

.directive('myDirective', function () {

Fiddle

Answer 2

I'm sure you've figured this out already, but if you change your scope definition for name to be

scope: {
  name: '@'
}

you will then be able to pass a string. The '@' interpolates the attribute while the '=' binds it. Additionally, you don't need to include an attribute name if it is the same as the scope variable.