Change the templateUrl of directive based on screen resolution AngularJS

Question

I need to change the templateURL according to screen resolution, For eg if my screen width is less than 768px that it must load "templates/browse-content-mobile.html" if its greater than 768px it must load "templates/browse-content.html".

Current used code .

app.directive('browseContent', function() {
    return {
        restrict: 'E',
        templateUrl: template_url + '/templates/browse-content.html'
    }
});

Here i am trying with this code

 app.directive('browseContent', function() {
    screen_width = window.innerWidth;
    if (screen_width < 768) {
        load_tempalte = template_url + '/templates/browse-content-mobile.html';
    } else if (screen_width >= 768) {
        load_tempalte = template_url + '/templates/browse-content.html';
    }
    return {
        restrict: 'E',
        templateUrl: load_tempalte
    }
});

This Code block is working, it loads the mobile and desktop page according to there resolution but when i resize the page it remain the same ...

For eg if I open the browser in minimize window (480px) and maximize it to 1366px the templateUrl remain same as "/templates/browse-content-mobile.html'" it must be "/templates/browse-content.html"

Answer 1

In your case you can listen window.onresize event and change some scope variable, which would control template url, for example in ngInclude .

app.directive('browseContent', function($window) {
    return {
        restrict: 'E',
        template: '<div ng-include="templateUrl"></div>',
        link: function(scope) {

            $window.onresize = function() {
                changeTemplate();
                scope.$apply();
            };
            changeTemplate();

            function changeTemplate() {
                var screenWidth = $window.innerWidth;
                if (screenWidth < 768) {
                    scope.templateUrl = 'browse-content-mobile.html';
                } else if (screenWidth >= 768) {
                    scope.templateUrl = 'browse-content.html';
                }
            }
        }
    }
});

Demo: http://plnkr.co/edit/DhwxNkDhmnIpdrKg29ax?p=preview

Answer 2

From the Angular Directive Documentation :

You can specify templateUrl as a string representing the URL or as a function which takes two arguments tElement and tAttrs.

Therefore you could define your directive as

app.directive('browseContent', ['$window', function($window) {
    return {
        restrict: 'E',
        templateUrl: function(tElement, tAttrs) {
             var width = $window.innerWidth;  //or some other test..
             if (width <= 768) {
                 return 'templates/browse-content-mobile.html';
             } else {
                 return '/templates/browse-content.html'
             }
        }
    }
}]);

UPDATED: I just saw your update and I think the issue might be that you are using angular $window wrapper but not injecting it. I modified my answer to add injection and use $window.

UPDATE 2 The scope of the question has changed since I posted this answer. The answer you have accepted answers the current scope of the question.