Refreshing iframe contents in AngularJS

As Paulo Scardine said, the right way to do it would be through a directive cause you shouldn't use controllers to manipulate DOM.

Something like this one could do :

.directive('refreshable', [function () {    return {        restrict: 'A',        scope: {            refresh: "=refreshable"        },        link: function (scope, element, attr) {            var refreshMe = function () {                element.attr('src', element.attr('src'));            };            scope.$watch('refresh', function (newVal, oldVal) {                if (scope.refresh) {                    scope.refresh = false;                    refreshMe();                }            });        }    };}])

Which could then be used like :

<iframe refreshable="tab.refresh"></iframe>

And :

$scope.refreshIframe = function(){    $scope.tab.refresh = true;}

Another hack-ish solution: if you don't want to create a directive but want to stick to the good practices of not manipulating the DOM in controller.Keep the url in an array and use ng-repeat to render the iFrame:View:

<iframe ng-repeat="url in vm.url" ng-src="{{url}}" />

Controller:

vm.url = ['http://google.com'];

So, every time you set the value of the vm.url, angular will re-render the iFrame.

Solved it by a hack suggested in Reload an iframe with jQuery

$scope.refreshIframe = function() {     var iFrame = $document.find("anIframe");    iFrame.attr("src",iFrame.attr("src"));};