We Keep Coding

ngTagsInput not binding to model

I just started using the ngTagsInput angular library and I am having issues with it updating the model. I show the tag input in an ionicPopup and interestingly the on-tag-added event fires which shows that $scope.sites[] IS populated.
When I call $scope.test() the array is empty. The only context in which it holds a value is the method tied to the on-tag-added event.
Here is a simplified controller example:
$scope.sites = [];
$scope.addSites = function() {
// this works
console.log("In addSites");
console.dir($scope.sites);
}
$scope.test = function() {
// in any other method $scope.sites is empty
console.dir($scope.sites);
}
In my view I have the tag element defined as:
<tags-input ng-model="sites" add-on-space="true" placeholder="Add Site Numbers" on-tag-added="addSites($tag)"></tags-input>
I find it incredibly strange that a $scope variable can contain the values I expect within the context of the library event but not outside of that.
Is there anything special that needs to be done in terms of binding? As far as the documentation goes I don't see what I am missing. Any suggestions would be much appreciated.

After a lot of trial and error I ended up solving this by doing the following.
<tags-input ng-model="$parent.sites" add-on-space="true" placeholder="Add Site Numbers" on-tag-added="addSites($tag)"></tags-input>
I was already passing 'scope : $scope' in my call to $ionicPopup({}) but without the ng-model set to "$parent.sites" it wasn't binding correctly.
Hopefully this saves somebody down the road from pulling their hair out!

Parsing parameters onclick for angularjs app

I am working on enhancing a feature of an already deployed application. All the js code is minified and i only can excess html files. I need to call a function on-click of a 'div' which parse some elements and open a new tab with resolved url(url updated with help of parsed elements).
My initial thought is to make a function in a new js file and add link to it on main html page. Evidently the call to function is fine with on click attribute call on the div. But while passing the angular controller parameters it throws error -
<div onclick="jumpToPage({{vm.username}})"></div>
function jumpToPage(user){
console.log(user);
};
Note - I don't have access to update minified files and i know i can un-minified it but there are lot of files and process is too long.
Please let me know how to resolve/pass parameter to JavaScript function

It should be onclick="jumpToPage(vm.username)">
If you pass {{vm.username}} it will get evaluted.
e.g. vm.username ="some_name"
so,your controller will get some_name and not referance to vm.username
and
it try to search for the same refarance.If it not find then throw exception.

try to use ng-click, when we use ng-click we don't need to use {{}} anymore, since it is automatically bind the model.

How to use href="javascript:window.open..." in Angular JS?

I am trying to use an tag in HTML to open a new modal browser window with a url that is retrieve through an Angular value, as so:
Test Link
The rest of my angular markup works just fine, but the above anchor does not work. In several attempts I'm made, I either don't get a value at all (null), or the resulting URL is marked as "unsafe".
I've tried calling a method within my controller to pass back the value, but same failures.
Am I going about this the wrong way?
Note: OpenPopUpPage is a built-in SharePoint function that I'm using, but I could just as well call window.open or something else. But I think that is immaterial to this problem.
UPDATE: I have create a jsfiddle (warning, first-timer), and attempted to follow a couple of the responses here as a demo, but I can't get any of them to work correctly. My jsfiddle

What you have isn't a normal link. It's more of a <button>, although it could go either way.
The angular way of handling the click to open a new window would then be:
<button type="button" ng-click="$ctrl.click($event)">...</button>
and in your angular code:
function Controller/Copmponent/Directive/Whatever() {
this.url = 'http://example.com';
this.click = function () {
open(this.url, this.target, this.options);
};
}
If your page needs to support JavaScript disabled, or if you weren't in angular land at all, it may be reasonable to use an <a> element provided that you give the href a valid URL:
...

.controller('controllerName', ['$scope', '$window',
function($scope, $window) {
$scope.redirectToNewPage = function(){
$window.open('https://www.google.com', '_blank');
};
}
]);

I wanted to add this final answer, since while others provide good examples for opening pop-ups or new windows, the main objective was to be able to open a new window to a location that was passed from an angular/REST query value.
The answer was 2-part:
1) Use ng-click along with a function/method inside of your controller to handle the opening of the new window. Avoid trying to use javascript directly within the . Thanks all who contributed to this lesson for me.
2) Also, when passing a value to a function that is coming from your controller query output, don't include the {{}} around your passed value, as apparently that is only for diaplaying data, not passing it.
So here's the resulting code:
//HTML:
<button type="button" ng-click="foo(myController.LinkValue)">Let's Do This</button>
//Code within Controller:
$scope.foo = function(myURL) {
open(myURL, 'popup', 'width=300,height=200');
};

Firebase.on() vs GET Request [duplicate]

I'm pretty new to Angular and I'm using firebase as my backend. I was hoping someone could debug this issue. When I first go to my page www.mywebsite.com/#defaultHash the data doesn't load into the DOM, it does after visiting another hash link and coming back though.
My controller is like this:
/* initialize data */
var fb = new Firebase('https://asdf.firebaseio.com/');
/* set data to automatically update on change */
fb.on('value', function(snapshot) {
var data = snapshot.val();
$scope.propertyConfiguration = data.products;
console.log($scope.propertyConfiguration);
console.log("Data retrieved");
});
/* save data on button submit */
$scope.saveConfigs = function(){
var setFBref = new Firebase('https://asdf.firebaseio.com/products');
setFBref.update($scope.propertyConfiguration);
console.log("configurations saved!");
};
I have 3 hash routes say "Shared", "Registration", and "Home" with otherwise.redirectTo set to "Shared".(They all use this controller) Here's the error that occurs: (all "links" are href="#hashWhereever")
1) Go to website.com/#Shared or just refresh. Console logs $scope.propertyConfiguration and "Data Retrieved". DOM shows nothing.
2) Click to website.com/#Registration, console logs $scope data properly, DOM is loaded correctly.
3) Click back to website.com/#Shared, console logs $scope data properly yet this time DOM loads correctly.
4) Refresh currently correctly loaded website.com/#Shared. DOM elements disappear.
Since $scope.data is correct in all the cases here, shouldn't Angular make sure the DOM reflects the model properly? Why is it that the DOM loads correctly only when I am clicking to the page from another link.
I can "fix" it by adding window.location.hash = "Shared" but it throws a huge amount of errors in the console.
FIXED:(sorta)
The function $scope.$apply() forces the view to sync with the model. I'd answer this question myself and close it but I'm still wondering why the view doesn't load correctly when I correctly assign a value to $scope. If Angular's "dirty checking" checks whenever there is a possibility the model has changed, doesn't assigning a value to $scope overqualify?

Angular has no way to know you've assigned a value to $scope.variable. There's no magic here. When you run a directive (ng-click/ng-submit) or Angular internal functions, they all call $apply() and trigger a digest (a check of the dirty flags and update routine).
A possibly safer approach than $apply would be to use $timeout. Currently, if you call a write op in Firebase, it could synchronously trigger an event listener (child_added, child_changed, value, etc). This could cause you to call $apply while still within a $apply scope. If you do this, an Error is thrown. $timeout bypasses this.
See this SO Question for a bit more on the topic of digest and $timeout.
This doc in the Angular Developer Guide covers how compile works; very great background read for any serious Angular dev.
Also, you can save yourself a good deal of energy by using the official Firebase bindings for Angular, which already take all of these implementation details into account.
Vaguely Related Note: In the not-too-distant future, Angular will be able to take advantage of Object.observe magic to handle these updates.

Angular Js how to show dynamic content

I am completely new to ANgularJs. As part of one project my page should show some content dynamically is changes in database. This changed vale can be obtained by a http get.
Before I try the complete scenario, I just wanted to see if is working atleast locally by taking a local variable. But its not working please suggest me how do I handle this.
angular.module('MyApp') .controller('HomeCtrl', function HomeCtrl($scope, $alert, $auth,$location) {
Counter=10;
Counter=Counter+1;
$scope.user={};
$scope.user.counter=Counter;
}
HomeCtrl($scope,$alert,$auth,$location);
);

It looks like you need to remove the following line:
HomeCtrl($scope,$alert,$auth,$location);
As you are still in the controller function call

remove
HomeCtrl($scope,$alert,$auth,$location);
but there were some other things also wrong..
working version:
fiddle -- http://jsfiddle.net/beLbv6L1/