I have an angularjs app, where I am using ng-app on div, and not the html.
The application works fine in IE>=10 and chrome,FF.
In IE 9, none of the ng- code is executed, breakpoint doesn't enter my custom angular scripts, and html shows {{}}.
It seems like angularjs is not getting bootstrapped.
I tried manually bootstrapping using
$(document).ready(function () {
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);
Doing this doesn't show the {{}} anymore, but no data is coming.
I am getting data using $http get like this
var User = $("#UserID").text();
$http({
method: 'POST',
url: '/Home/GetData/',
data: { UserName: $("#UserID").text() }
}).success(function (data) {
$scope.GridData = angular.fromJson(data);
});
Angularjs 1.3.2
_Layout.cshtml
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" >
<head>
<meta charset="utf-8" />
<title></title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<!--[if lte IE 9]>
<script src="xdomain.js" slave="http://example.org/proxy.html"></script>
<![endif]-->
#Scripts.Render("~/bundles/Angular")
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Angular/css")
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript">
$.ajaxSetup(
{
cache: false
});
$(document).ready(function () {
$(".openPopup").live("click", function (e) {
e.preventDefault();
$("#PopUp").addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this)
.attr("data-dialog-title"), close: function () {
//$(this).remove();
}, modal: true, height: 400, width: 900
}).load(this.href);
});
$(".close").live("click", function (e) {
$(this).closest(".dialog")
.dialog("close");
window.location.reload();
});
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="~/Home/Index" class="navbar-logo">
<img src="#Url.Content("~/Images/xs.png")">
<span>BillPrep</span>
</a>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle" data-target="#" href="#">
<strong>#Html.Action("LoginDisplay", "Home", new { Name = User.Identity.Name })</strong> <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>User Settings</li>
<li>System Settings</li>
<li>#Html.ActionLink("Sign Out", "Logout", "Home")</li>
</ul>
</ul>
</div>
</div>
</nav>
<div>
#RenderSection("featured", required: false)
#RenderBody()
</div>
Homepage.cshtml
<script src="~/Scripts/angularjs/stacktrace.js"></script>
<script type="text/javascript">
$(document).ready(function () {
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById("HomeGrid"), ['ngGridApp']);
// angular.bootstrap(document.getElementById("tabgrid"));
});
});
</script>
<div>
<body ng-controller="ngGridController" id="HomeGrid">
<style>
#myTabs div li.active a {
background-color: lightsteelblue;
}
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
}
.bold {
color: black;
font-weight: bold;
}
</style>
<div ng-controller="TabsDemoCtrl" data-ng-init="init()" id="tabgrid">
<div id="UserID" ng-show="false">{{User}}</div>
<loading></loading>
<br />
<tabset ng-show="{{show1}}">
<tab id="Inbox" active="isFirstActive">
<tab-heading>
<span class="glyphicon glyphicon-inbox" aria-hidden="true"></span>
Inbox
</tab-heading>
<div class="ngGridStyle" ng-grid="ngGridViewInbox"></div>
</tab>
<tab id="pending" active="isSecondActive">
<tab-heading>
<span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>
show2
</tab-heading>
<div class="ngGridStyle" ng-grid="ngGridView2" ng-show={{show2}}></div>
</tab>
js file
var app = angular.module('ngGridApp', ['ngGrid', 'ui.bootstrap', 'logToServer'])
.directive('loading', function () {
return {
restrict: 'E',
replace: true,
template: '<div class="loading"><img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif" width="20" height="20" />LOADING...</div>',
link: function (scope, element, attr) {
scope.$watch('loading', function (val) {
if (val)
$(element).show();
else
$(element).hide();
});
}
}
})
TabsDemoCtrl.$inject = ["$scope", "$window"];
angular.module('ngGridApp').controller('TabsDemoCtrl', TabsDemoCtrl);
function TabsDemoCtrl($scope, $window) { $scope.User = ""; }
ngGridController.$inject = ["$scope", "$http", "$interval"];
app.controller('ngGridController', ngGridController);
function ngGridController($scope, $http, $interval) {
$scope.callAtInterval = function () {
var User = $("#UserID").text();
$http({
method: 'POST',
url: '/Home/GetData/',
data: { UserName: $("#UserID").text() }
}).success(function (data) {
$scope.GridData = angular.fromJson(data);
});
Adding the solution, if it can help someone.
The issue was creation of multiple body tags, one in the master page (_Layout) and other in the main page. The ng-app was applied to the main page body tag.
Since the html was not formed properly, angularjs was not bootstrapping correctly.
Changing the body tag on main page to div, and applying ng-app to div made it work fine in IE 9
Related
I have a problem with custom defined directive - which uploads file - in AngularJS when using with ngRoute and ngView. It works well when section with <input>field is in home.html, but when I put it to loaddata.html it doesn't work (as below), despite the fact that functions loadtrans() and uploadF() work - $scope.file is null. How can I fix it?
directive:
app.directive('uploadFile', function($parse){
return {
restrict: 'A',
link: function(scope,element,attrs){
var model = $parse(attrs.uploadFile),
modelSetter= model.assign;
element.bind('change', function(){
scope.$apply(function (){
modelSetter(scope,element[0].files[0]);
});
});
}
}
});
home.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="webjars/bootstrap/3.3.7-1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body ng-controller="AppCtrl">
<nav>
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#" data-toggle="tab" >GPW</a></li>
<li role="presentation" ><a href="#!/stocks" data-toggle="tab" >Load data</a></li>
<li role="presentation" ><a href="#!/chart" data-toggle="tab" >Chart</a></li>
</ul>
</nav>
<div class="row">
<div class="col-md-3">
<button class="button btn-block btn-primary" ng-click="getData()">
GetData()
</button>
<input type="number" ng-model="dayFrom"/>
</div>
<div class="col-md-3">
<a class="button btn-block btn-primary" href="/new-wallet.html"> <button class="button btn-block btn-primary">
Create your wallet
</button></a>
</div>
</div>
<div ng-view></div>
<script src="webjars/jquery/3.1.1-1/jquery.min.js" type="application/javascript"></script>
<script src="webjars/angularjs/1.6.0/angular.min.js" type="application/javascript"></script>
<script src="webjars/angularjs/1.6.0/angular-resource.min.js" type="application/javascript"></script>
<script src="webjars/moment/2.17.1/moment.js" type="application/javascript"></script>
<script src="webjars/Chart.js/2.3.0/dist/Chart.js" type="application/javascript"></script>
<script src="webjars/angular-chart.js/1.1.1/dist/angular-chart.js" type="application/javascript"></script>
<script src="webjars/angular-route/1.6.0/angular-route.js" type="application/javascript"></script>
<script src="js/app.js" type="application/javascript"></script>
</body>
</html>
loaddata.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-block btn-primary btn-lg" ng-click="loadTrans()">
Load your transactions()
</button>
<div ng-show='filefield' >
<!-- <label class="btn btn-default">-->
Browse..
<input type="file" upload-file="file" >
<!-- </label>-->
<button class="btn btn-default " ng-click="uploadF()">
Submit
</button>
</div>
</div>
</div>
</body>
</html>
Functions:
$scope.loadTrans=function(){
$scope.filefield=true;
}
$scope.uploadF=function(){
console.log("upload");
console.log($scope.file);
var fileFormData = new FormData();
fileFormData.append('file', $scope.file);
console.log($scope.file);
$http.post("http://localhost:8080/loadfile", fileFormData, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined}})
.then(function(data){
var t = angular.fromJson(data.data.trans);
for (var key in t)
{
for(var k in t[key])
{
$scope.labels.push(k);
$scope.data.push(t[key][k]);
}
}
$scope.chartDataService.status = 'Done';
console.log($scope.data);
$scope.chartDataService.data = $scope.data;
$scope.profit = data.data.success;
$scope.trans = data.data.trans;
$scope.uploadSuccess=true;
$scope.time = moment().fromNow();
},
function(status){
console.log('errors');
});
};
EDIT:
Modified directive which work:
app.directive('uploadFile', function($parse){
return {
restrict: 'A',
scope:false,
link: function(scope,element,attrs){
var model = $parse(attrs.uploadFile),
modelSetter= model.assign;
console.log("directive");
console.log(model);
element.bind('change', function(){
scope.$apply(function (){
modelSetter(scope.$parent,element[0].files[0]);
console.log(element[0].files[0]);
});
});
}
}
});
But as I assume it is not universal solution.. eg. when I use this directive not within ng-view.
EDIT2:
I solved this problem as below. If you have any better solutions, please share with me.
app.directive('uploadFile', function($parse){
return {
restrict: 'A',
link: function(scope,element,attrs){
var model = $parse(attrs.uploadFile),
modelSetter= model.assign;
console.log("directive");
console.log(model);
element.bind('change', function(){
scope.$apply(function (){
if(scope.$parent === scope.$root)
modelSetter(scope,element[0].files[0]);
else
modelSetter(scope.$parent,element[0].files[0]);
console.log(element[0].files[0]);
console.log(scope);
});
});
}
}
});
This solved my problem:
app.directive('uploadFile', function($parse){
return {
restrict: 'A',
link: function(scope,element,attrs){
var model = $parse(attrs.uploadFile),
modelSetter= model.assign;
element.bind('change', function(){
scope.$apply(function (){
if(scope.$parent === scope.$root)
modelSetter(scope,element[0].files[0]);
else
modelSetter(scope.$parent,element[0].files[0]);
});
});
}
}
});
I want to display the alias beside the age when I click a button. or when I click a name, I want the alias to be displayed besides the age of that person.
<html ng-app="myApp">
<head>
<script src="https://code.jquery.com/jquery-3.0.0.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" rel="stylesheet"></script>
<style>
li {color: orange;
background-color: black;
padding: 5px;
text-align: center;
}
</style>
<script>
var myApp= angular.module("myApp",[]);
myApp.controller("myCtrl", function($scope){
$scope.residents= [
{fname:"Jekin", lname:"Rajal", age:29, alias:"Jek"},
{fname:"Jaydip", lname:"Vasoya", age:24, alias:"JD"},
{fname:"Melvin", lname:"Matthew", age:23, alias:"Anna"}]
});
</script>
</head>
<body>
<div class="container-fluid" ng-controller="myCtrl" >
<ul>
<li type="none" ng-repeat="resident in residents">{{resident.fname}} {{resident.lname}}, {{resident.age}} </li>
</ul>
<br/>
<button type="button" class="btn btn-info" ng-click="fucn"> Click to show alias</button>
</div>
</body>
</html>
You can try wrapping the alias inside a <div> which is conditionally revealed after the user clicks the button:
<ul>
<li type="none" ng-repeat="resident in residents">
{{resident.fname}} {{resident.lname}}, {{resident.age}}
<div ng-show="showAlias">{{resident.alias}}</div>
</li>
</ul>
And then in your controller implement a handler function for the button click:
myApp.controller("myCtrl", function($scope) {
$scope.showAlias = false;
$scope.residents = [
{fname:"Jekin", lname:"Rajal", age:29, alias:"Jek"},
{fname:"Jaydip", lname:"Vasoya", age:24, alias:"JD"},
{fname:"Melvin", lname:"Matthew", age:23, alias:"Anna"}]
$scope.fucn = function() {
$scope.showAlias = true;
};
});
I have following code in my app:
<li ng-repeat="data in array">
<ul class="social-share">
<li>
<i class="fa fa-share-alt"></i>Share
<div id="myPopover" class="hide">
<strong>Social Share</strong>
<ul class="social-spacing">
<li><a class="btn btn-primary share-button" title="" data-original-title="" href="" ng-click="share(data.translation)">Facebook</a></li>
</ul>
</div>
</li>
</ul>
<p class="eng-translation">{{data.translation}}</p>
</li>
I'm using an angular directive to show the popover which contains social sharing options. Directive is as follows:
myApp.directive('popover', function() {
return function(scope, elem) {
elem.popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});
}
});
All of the data in array displays properly as is supposed to be with ng-repeat. But, when I click on the Facebook share button, it only sends the first element of the array to the function "share".
If I don't use popover, it works fine.
Any help on this would be really kind.
Edit: Array object added
$scope.array = [
{
'translation': 'translation-1'
},
{
'translation': 'translation-2'
},
{
'translation': 'translation-3'
},
{
'translation': 'translation-4'
},
{
'translation': 'translation-5'
},
{
'translation': 'translation-6'
},
{
'translation': 'translation-7'
}
];
You can find the working version of your code below here. Are you missing to add ng-app="app" or ng-controller="myController" elements?
var myApp = angular.module('app', []);
myApp.controller('myController', ['$scope', function($scope) {
$scope.myArray = [
{
'translation': 'translation-1'
},
{
'translation': 'translation-2'
},
{
'translation': 'translation-3'
},
{
'translation': 'translation-4'
},
{
'translation': 'translation-5'
},
{
'translation': 'translation-6'
},
{
'translation': 'translation-7'
}
];
$scope.share = function($index) {
alert($scope.myArray[$index].translation);
};
}]);
myApp.directive('popover', function() {
return function(scope, elem) {
elem.popover({
container: 'body',
html: true,
content: function () {
var clone = elem.siblings('#myPopover').clone(true).removeClass('hide').css("display", "inherit");
return clone;
}
}).click(function(e) {
e.preventDefault();
});
}
});
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="app">
<div ng-controller="myController">
<li ng-repeat="myData in myArray">
<ul class="social-share">
<li>
</i>Share
<div id="myPopover" class="hide">
<strong>Social Share</strong>
<ul class="social-spacing">
<li><a class="btn btn-primary share-button" title="" data-original-title="" href="" ng-click="share($index)">Facebook</a></li>
</ul>
</div>
</li>
</ul>
<p class="eng-translation">{{myData.translation}}</p>
</li>
</div>
</
</body>
</html>
I'm developing a Wordpress Ionic application using the Wordpress REST API and Jetpack. I followed a tutorial Hybrid Mobile Application with Ionic/Cordova, but ran into an ugly problem. When I enter my REST API link in $http.get() and try it in my browser it keeps loading like this:
On the other hand, the Freshy-Pressed Api works, though I don't know why.
Here is the HTML and JavaScript I'm using:
var FPApp = angular.module("FPApp", ["ionic"]);
FPApp.service("FPSvc", ["$http", "$rootScope", FPSvc]);
FPApp.controller("FPCtrl",
["$scope", "$sce",
"$ionicLoading", "$ionicListDelegate", "$ionicPlatform",
"FPSvc", FPCtrl]);
function FPCtrl($scope, $sce, $ionicLoading, $ionicListDelegate, $ionicPlatform, FPSvc) {
$ionicLoading.show({template: "Loading blogs..."});
$scope.deviceReady = false;
$ionicPlatform.ready(function() {
$scope.$apply(function() {
$scope.deviceReady = true;
});
});
$scope.blogs = [];
$scope.params = {};
$scope.$on("FPApp.blogs", function(_, result) {
result.posts.forEach(function(b) {
$scope.blogs.push({
name: b.author.name,
avatar_URL: b.author.avatar_URL,
title: $sce.trustAsHtml(b.title),
URL: b.URL,
featured_image: b.post_thumbnail.URL
});
});
$scope.params.before = result.date_range.oldest;
$scope.$broadcast("scroll.infiniteScrollComplete");
$scope.$broadcast("scroll.refreshComplete");
$ionicLoading.hide();
});
$scope.loadMore = function() {
FPSvc.loadBlogs($scope.params);
}
$scope.reload = function() {
$scope.blogs = [];
$scope.params = {};
FPSvc.loadBlogs();
}
$scope.show = function($index) {
cordova.InAppBrowser.open($scope.blogs[$index].URL, "_blank", "location=no");
}
$scope.share = function($index) {
$ionicListDelegate.closeOptionButtons();
window.socialmessage.send({
url: $scope.blogs[$index].URL
});
}
}
function FPSvc($http, $rootScope) {
this.loadBlogs = function(params) {
$http.get("https://public-api.wordpress.com/rest/v1/sites/100060382/posts/", {
params: params})
.success(function(result) {
$rootScope.$broadcast("FPApp.blogs", result);
});
}
}
<html lang="en" data-ng-app="FPApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--Setup Cordova-->
<meta http-equiv="Content-Security-Policy" content="default-src *;">
<script src="cordova.js"></script>
<!--Setup Ionic-->
<link rel="stylesheet" href="lib/ionic/css/ionic.css">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--Setup Application-->
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
</head>
<body data-ng-controller="FPCtrl">
<ion-pane>
<div class="bar bar-header bar-energized">
<h1 class="title">ZahranPress</h1>
</div>
<ion-content class="background">
<ion-refresher pulling-text="Pull" on-refresh="reload()">
</ion-refresher>
<div class="list card" data-ng-repeat="b in blogs">
<div class="item item-avatar">
<img data-ng-src="{{b.avatar_URL}}" alt="">
<h2 data-ng-bind-html="b.title"></h2>
<p> {{ b.name }} </p>
</div>
<div class="item item-body">
<img data-ng-if="b.featured_image" data-ng-src="{{ b.featured_image }}" alt="" class="full-image">
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" data-ng-click="show($index)">
<i class="icon ion-ios-book"></i>
Read
</a>
<a class="tab-item" data-ng-click="share($index)">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" ng-if="deviceReady"></ion-infinite-scroll>
</ion-content>
</ion-pane>
</body>
</html>
How do I resolve this problem?
I took a sample AngularJS app and began to change it to suit my needs. Now clicking to change the orderby causes the entire controller to be reloaded. Well that's where I'm initializing the default orderby. So what I get when I click a new orderby is a flash of the proper orderby then a quick return to the default. An alert showed me the controller is getting executed but I don't know why or how to fix it.
Plunker here
index.html
<!DOCTYPE html>
<html data-ng-app="promptsApp">
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div ng-view></div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="promptsService.js"></script>
</body>
</html>
app.js
var app = angular.module('promptsApp', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/prompts',
{
controller: 'PromptsController',
templateUrl: 'partial.html'
})
.otherwise({ redirectTo: '/prompts' });
});
controllers.js
app.controller('PromptsController', function ($scope, promptsService)
{
init();
function init()
{
$scope.prompts = promptsService.getPrompts();
$scope.orderby='TRANSFEREE';
$scope.reverse = false;
//alert('Hi');
}
$scope.setOrder = function (orderby) {
if (orderby === $scope.orderby)
{
$scope.reverse = !$scope.reverse;
}
$scope.orderby = orderby;
};
});
promptsService.js
app.service('promptsService', function ()
{
this.getPrompts = function (user)
{
var prompts = [
{
id: 1, NOTE: 'Call client about something', CALLBACK_DATE: '12-01-2013', TRANSFEREE: 'Tom Tuttle', REG_NUM: '123456'
},
{
id: 2, NOTE: 'Notify client of delay', CALLBACK_DATE: '12-10-2013', TRANSFEREE: 'Eddie Munster', REG_NUM: '101314'
},
{
id: 3, NOTE: 'Complete paperwork', CALLBACK_DATE: '12-12-2013', TRANSFEREE: 'Mary Tyler Moore', REG_NUM: '998877'
}
];
return prompts;
};
});
partial.html
<div class="prompts">
<div class="container">
<header>
<h3>Prompts</h3>
<ul class="nav nav-pills">
<li ng-class="{'active': orderby=='CALLBACK_DATE'}">Date</li>
<li ng-class="{'active': orderby=='TRANSFEREE'}">Transferee</li>
<li> (Currently: {{orderby}})</li>
</ul>
</header>
<div>
<div class="row cardContainer">
<div class="span3 card" data-ng-repeat="prompt in prompts | orderBy:orderby:reverse">
<div class="cardHeader">{{prompt.TRANSFEREE}}</div>
<div class="cardBody">{{prompt.NOTE}}
<br># {{prompt.REG_NUM}} {{prompt.CALLBACK_DATE}}
</div>
</div>
</div>
</div>
<br />
{{prompts.length}} prompts
</div>
</div>
See Plunker here
<li ng-class="{'active': orderby=='CALLBACK_DATE'}">
<a href="" ng-click="setOrder('CALLBACK_DATE')">\
CallBack Date
</a>
</li>
<li ng-class="{'active': orderby=='TRANSFEREE'}">
<a href="" ng-click="setOrder('TRANSFEREE')">
Transferee
</a>
</li>
<li>> Currently: {{orderby}}</li>
Remove the href="#" and replace it with href="" to get the desired result.
Having href="#" causes the route to change (and become the same as before) but triggers the initialization of the controller once more.