Ng-click does not work first time - but works afterwards

I have two states/views called bookmark and bookmarked. The bookmark view has a button which passes an url into a function called setURL. This function sets the src for the iframe on the bookmarked view.

<ion-view view-title="Bookmarks">
    <ion-content>
        <button class="button" ui-sref="myLearning.bookmarked" ng-click="setURL('SOMEURL')">Bookmark</button>
    </ion-content>
    <div class="bar bar-footer bar-assertive"></div>
</ion-view>

The bookmarked view has an iframe whose src is set by the button on the previous view. The src is currently set to nothing because I would never navigate to this view unless I've clicked the bookmark button which would pass in an url.

<ion-view view-title="Bookmarked">
    <ion-content>
        <iframe id="learningFrame" src="" width="100%" height="100%" seamless></iframe>
    </ion-content>
</ion-view>

When I run the app and navigate to the bookmark view and click on the bookmark button, it navigates to the bookmarked view but it displays a blank page in the iframe (src="") rather than using the url passed in from the function. However, from this blank page if I navigate to the bookmarks view and click on the bookmark button the second time, the actual url loads.

Why does it the view not use the url that I have passed in through setURL, on the first load?

This is what the function looks like:

.controller('bookmarkCtrl', function($scope){
    $scope.setURL = function(currURL){
        document.getElementById('learningFrame').src = currURL;
    };
});

I don't know why it does not work the first time... Any help would be appreciated, thank you.

Instead of doing DOM manipulation from the controller you could simply use ng-src that would have {{}} to have decide src attribute value.

Markup

<ion-view view-title="Bookmarked">
    <ion-content>
        <iframe id="learningFrame" ng-src="{{learningFrameUrl}}" width="100%" height="100%" seamless></iframe>
    </ion-content>
</ion-view>

Controller

.controller('bookmarkCtrl', function($scope){
    $scope.setURL = function(currURL){
        $scope.learningFrameUrl = currURL;
    };
});

Update

As you wanted to share data between you controllers then you could use service/factory component. Then you can use that service by injecting it inside your controller/directive wherever you wanted to use it.

Service

app.service('dataService', function(){
   this.learningFrame = {
      Url: ''
   };
   //..other stuff here..//
});

Controller

.controller('bookmarkCtrl', function($scope, dataService){
    $scope.setURL = function(currURL){
        //this can be available in other controller
        //wherever you take value from learningFrameUrl
        $scope.learningFrame = dataService.learningFrame;
        dataService.learningFrame.Url = currURL; 
    };
});