How to refresh iframe url?

What you are doing in your code is not a valid method. You're manipulating the DOM using native methods that don't run a digest cycle, you need to do it manually $scope.$apply(). That would solve your problem, but generally you shouldn't be doing DOM manipulation from controllers that are considered BAD practices. Instead, I recommend you to use the angular two-way binding feature. Assign the url in the scope scope variable, then add ng-src="{{url}}"that srcurl to the iframe tag using , so the url will be updated in angular and the content will be loaded iframefrom the srcurl as the url is updated .

HTML

<iframe id="myFrame" width="100%" ng-src="{{url}}" height={{iframeHeight}}>

code

$scope.url = "http://example.com"

When you change the scope variable in the controller , the content of the srciframe also changes and the content is reloaded.iframe

Updates

To fix the caching issue you need to append the current datetime to your url which will create a new url each time and will not be cached by the browser. Using it like this $scope.url = "http://example.com?dummyVar="+ (new Date()).getTime()will never harm your current behavior, it just requires you to add dummyVarthe current time value, which will always be unique.

$scope.url = "http://example.com?dummyVar="+ (new Date()).getTime()