While creating a directive I am getting following error. 

I am getting following error

> 
> 13642 Error: [$compile:multidir] Multiple directives [myDirective (module: myApp), myDirective (module: myApp)] asking for template on: 
> 
> 
> 

I am new to directive creation. Can you explain -

1. Though I use only one directive, it is saying multiple directives. Which are the other directives here?
2. How to resolve this error?

**UPDATE**

After removing the templateUrl, the error is gone. But the value was not rendered. As mentioned in the answer it is because of the creation of `isolated scope` rather than a `shared scope`.

[![enter image description here](https://i.stack.imgur.com/KMQPe.jpg)](https://i.stack.imgur.com/KMQPe.jpg)

```html
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.js"></script>

    <script type="text/javascript">
        //defining module
        var app = angular.module('myApp', ['ngResource']);

        //defining controller
        app.controller('myController', function ($scope) 
 {
            $scope.myVal = 'A';

        });

 app.directive('myDirective', function () 
{
    return {
        restrict: 'EA',      
        scope: {title: '@' },
        template: '<div>{{ myVal }}</div>',
        templateUrl: 'mytemplate.html',
        link: function ($scope, element, attrs) { } 
    }
});

    </script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
       <div my-directive></div>
    </div>
</body>
</html>
```