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

Question

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.

Answer 1

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;
};
});