Failed to load template in angular $mdDailog

Question

I am using $mdDailog in my angularjs application.I have addUser() function which is called on ng-click operation. Inside addUser() am using $mdDailog.show(). Where I am passing html file path in templateUrl to load.

I am getting error as Error: [$compile:tpload] Failed to load template: editUser.html

Controller Function:

function addUser(ev) {
           $mdDialog.show({
           controller: DialogController,  
           templateUrl: 'editUser.html',
           parent: angular.element(document.body),
           targetEvent: ev,
           clickOutsideToClose: true,
          });

Index.html:

 <md-button class="md-padding" id="popupContainer"  ng-click="vm.addUser($event)" ng-cloak>Add User</md-button>

editUser.html:

<div>
    <md-dialog aria-label="Mango (Fruit)">
        <p>Here I will place my input elements</p>
  </md-dialog>
</div>

Answer 1

You must pass a path that is relative to the base URL :

templateUrl: '/{PATH_TO_THIS_FILE}/editUser.html',