I am trying with AngularJS directive, here is my code:

index.html

```
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>Directive</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>
<body>
    <photo photo-src="abc.jpg" caption="This is so Cool" />
</body>
</html>

```

app.js

```
var app = angular.module('myapp',[]);

app.directive('photo',function(){
    return {
        restrict: 'E',
        templateUrl: 'photo.html',
        replace: true,
        scope: {
            caption: '@', 
            photoSrc: '@'
        }
    }
});

```

photo.html

```
<figure>
    <img ng-src="{{photoSrc}}" width="500px">
    <figcaption>{{caption}}</figcaption>
</figure>

```

I test the file by open it directly on browser. It works fine on Firefox, but not on IE & chrome. Both IE & Chrome show error of `Failed to load template`

How can I fix it?