How to refresh iframe url?

I am creating an app using ionic in which I am displaying a URL using iframe. This is the HTML code:

  <iframe id="myFrame" width="100%" height={{iframeHeight}}>

This is the angular js:

 $scope.iframeHeight = window.innerHeight;
                        document.getElementById("myFrame").src = value['url'];

Everything is working, however when I make changes on the site from the backend and refresh the app the new changes are not appearing in the app.

The thing you are doing in your code is not a valid way of doing it. You are manipulating DOM using native method that will not run digest cycle, you need to run it manually by doing $scope.$apply(). That will solve your problem but generally you should not do DOM manipulation from controller which is considered as BAD practice. Rather I'd suggest you to use angular two way binding feature. Assign url in scope scope variable and add that on iframe tag using ng-src="{{url}}" so that src URL will be updated by angular and as url get updated iframe will load content from src URL in it.

HTML

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

Code

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

As you change scope variable in the controller the the src of iframe will also gets change and iframe will reload the content.

Update

To solve caching issue you need to append current date time to you url that will every time make a new URL and it won't be cached by the browser. Something like $scope.url = "http://example.com?dummyVar="+ (new Date()).getTime() by using this it will never harm your current behavior, only you need to append dummyVar with current time value which would be always unique.

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

As @pankajparkar suggested in his answer, I'd suggest you using angular 2-way data binding.

In addition to that, you need to wrap the urls with $sce.trustAsResourceUrl function in order to your iframe to work.

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

And

$scope.url = $sce.trustAsResourceUrl("http://example.com");