Set templateUrl dynamically Using ngClick

Question

well i have function that get the url for modal templateUrl from an array in my Scope . then i use this function on my li for add url to my modal . but when i click on the li , showReleventMdl() function will executed and show the url string in console.log() but my modal is disappear and i find this Error:

Uncaught TypeError: Cannot read property 'focus' of undefined

here my code :

app.controller('filterCtrl', function($scope,$modal, $rootScope ,loginService ) {

    var filterTemps = [
        "partial/uiComponent/mdlFilters/mdl.estateType.filter.html",
        'partial/uiComponent/mdlFilters/mdl.dealKind.filter.html',
        'partial/uiComponent/mdlFilters/mdl.buyPrice.filter.html',
        'partial/uiComponent/mdlFilters/mdl.trustPrice.filter.html',
        'partial/uiComponent/mdlFilters/mdl.rentPrice.filter.html',
        'partial/uiComponent/mdlFilters/mdl.forigenPrice.filter.html',
        'partial/uiComponent/mdlFilters/mdl.totalRoom.filter.html',
        'partial/uiComponent/mdlFilters/mdl.substructure.filter.html'
    ];

    var filtersModal = $modal({
        backdrop:true,
        placement:'top',
        controller : 'filterCtrl',
        templateUrl:'',
        show: false
    });

    $scope.showReleventMdl = function(num) {
        filtersModal.templateUrl = filterTemps[num];
        console.log(filtersModal.templateUrl);
        filtersModal.$promise.then(filtersModal.show);
    };


});

 <div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'" ng-click="navCollapsed = true">
                <!-- your normal collapsable content here -->
                <ul class="nav navbar-nav">
                    <li><a href="" ng-click="showReleventMdl(0)" ng-bind="string.pages.form.estateType"></a><span>: a<span></li>
                    <li><a href="" ng-click="showReleventMdl(1)" ng-bind="string.pages.form.dealKind"><span>: b </span></a></li>
                    <li><a href="" ng-click="showReleventMdl(2)" ng-bind="string.pages.form.buyPrice"><span>: c </span></a></li>
                    <li><a href="" ng-click="showReleventMdl(3)" ng-bind="string.pages.form.trustPrice"><span>: d </span></a></li>
                    <li><a href="" ng-click="showReleventMdl(4)" ng-bind="string.pages.form.rentPrice"><span>: g </span></a></li>
                    <li><a href="" ng-click="showReleventMdl(5)" ng-bind="string.pages.form.forigenPrice"><span>: e </span></a></li>
                    <li><a href="" ng-click="showReleventMdl(6)" ng-bind="string.pages.form.totalRoom"><span>: f </span></a></li>
                    <li><a href="" ng-click="showReleventMdl(7)" ng-bind="string.pages.form.substructure"><span>: g </span></a></li>
                </ul>
            </div>

Answer 1

i just put Modal inside my showReleventMdl() function and every things looks Fine .

but i still don't know why ?