Directive not working while using routing

Question

Look at following AngularJS code

dir.js

(function() {
        var myApp = angular.module("MyApp");
          myApp.directive('myMovie', function() {
                return {
                  restrict: 'E',
                  transclude: 'true',
                  template: '<h1>This is my first directives</h1>',
                  link: function(scope, element, attr){
                        element.append("<strong>"+attr.title+"</strong>");
                  }
                };
              });

      })();

Above directive is not working while I am using Angular routing. The same code works without using routing in my application. What to do? Is there any Idea why is this code is not working when I use "ngRoute" in my Application?

I have added "myMovie" tag into HTML body.Still not getting directive template on the HTML page.

Below is my code for "ngRoute"

script.js

(function(){
    var app = angular.module("MyApp", ["ngRoute"]);

    app.config(function($routeProvider){
        $routeProvider
        .when("/", {
            templateUrl : "main.html",
            controller : "Main",
            controllerAs : "vm"
        })
        .when("/first", {
            templateUrl : "first.html",
            controller : "First",
            controllerAs : "vm"
        })
        .when("/second", {
            templateUrl : "second.html",
            controller : "Second",
            controllerAs : "vm"
        })
        .otherwise(({
            templateUrl : "404.html"
        }));
    });



})();

first.controller.js

(function(){
    var app = angular.module("MyApp");
    app.controller("First", ["$scope", function($scope){
        var vm = this;
        vm.message = "This is first page";
    }]);
})();

second.controller.js

(function(){
    var app = angular.module("MyApp");
    app.controller("Second",["$scope", function($scope){
        var vm = this;
        vm.message = "This is second page";
    }]);
})();

main.controller.js

(function(){
    var app = angular.module("MyApp");
    app.controller("Main", ["$scope", function($scope){
        var vm = this;
        vm.message = "This is main page";
    }]);

})();

The HTML page where I used directive

first.html

<div>
    <myMovie></myMovie>
</div>

Where I am wrong in above code?..

Answer 1

AngularJS normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

myMovie directive will be used with my-movie tag.

By convention, I recommend you to use dash (-) as limiter, but you can use :, _.

Working demo

Source