How to update the ng-href URl on $scope change

Question

I'm looking to update the 'ng-href' url on scope value from controller.Initially on page load url is inserted fine. But then when i change the scope that URL should be updated

<a ng-href=={{selectedValue}} /a>

//in my controller
$scope.selectedValue = "www.google.com"

//need to update this url in this function
otherButtonFn = function(){
//want to Update the url here
$scope.selectedValue =  "www.yahoo.com"
}

//ng-href is loading initial url but not updating when $scope is called
  <a ng-href=="www.google.com" href=""www.google.com" /a>

Here i want to update the url with "www.yahoo.com" when that function is called.

close your anchor tag correctly like `Test` – Pankaj Parkar Jun 16 '16 at 19:50 — Pankaj Parkar, Jun 16 '16 at 19:50
thanks, but i'm using scope instead of $rootscope – rUI Jul 14 '16 at 20:57 — rUI, Jul 14 '16 at 20:57

score 1 · Answer 1 · edited Jun 16 '16 at 23:04

1

The problem is with the anchor tag which has double == and no "" around it. Please see updated example below:

<a ng-href="{{selectedValue}}">Link Name</a>

$scope.selectedValue = "www.google.com";


$scope.otherButtonFn = function(){
   $scope.selectedValue =  "www.yahoo.com";
}

edited Jun 16 '16 at 23:04

Leo Farmer

7,730
5
31
47

answered Jun 16 '16 at 19:52

Ankit Solanki

82
4

score 0 · Answer 2 · answered Jun 16 '16 at 19:47

0

angular.module('myApp',[])
.controller('TestCtrl', function($scope){
  $scope.something = "somewhere";
  $scope.changeSomething = function(){
    $scope.something = "somewhere else";
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="TestCtrl">
    <a ng-href="{{something}}">{{something}}</a>
    <button ng-click="changeSomething()">Change</button>
  </div>
</div>

Not able to reproduce the problem as stated.

answered Jun 16 '16 at 19:47

shaunhusain

19,630
4
38
51

Thing is that button is in other template. Though it is using the same controller – rUI Jun 16 '16 at 20:26
I made a silly mistake, i used $rootscope for global scope and it works. Thanks thought – rUI Jun 16 '16 at 21:00

How to update the ng-href URl on $scope change

2 Answers2