We Keep Coding

function inside ngRepeat executed too often

I have three tabs that has different html inside ng-include. These tabs are shown using ng-repeat. Only one HTML template contains function call, but it's executed 3 times (once per ng-repeat iteration). What is wrong here and how to fix it?
var app = angular.module('myApp', [])
app.controller('myCtrl', [
'$scope',
function($scope){
$scope.randomFnc = function (i) {
console.log(i);
return "Placeholder text";
}
$scope.tabs = [
"a",
"b",
"c"
];
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="tab in tabs">
<div ng-if="$index == 1">
{{$index}}<input type="text" value="" placeholder="{{randomFnc($index)}}"/>
</div>
<div ng-if="$index != 1">{{$index}}</div>
</div>
</div>
</div>

You can use ng-init though it is not highly recommended to achieve this. The reason why your function call is being executed thrice is because angular doesn't know if any $scope value has changed during each digest cycle. So the function will get executed for each digest cycles. In your case, it will get executed when the ng-if conditions become true as well as during the two digest cycles accounting a total of three. This is the reason why it gets executed 3 times with the value 1 regardless of the number of items in the array.
var app = angular.module('myApp', [])
app.controller('myCtrl', [
'$scope',
function($scope) {
$scope.x = {};
$scope.randomFnc = function() {
console.log("once");
$scope.placeholderText = "Placeholder text";
}
$scope.tabs = [
"a",
"b",
"c"
];
}
])
app.directive('trackDigests', function trackDigests($rootScope) {
function link($scope, $element, $attrs) {
var count = 0;
function countDigests() {
count++;
$element[0].innerHTML = '$digests: ' + count;
}
$rootScope.$watch(countDigests);
}
return {
restrict: 'EA',
link: link
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat="tab in tabs">
<div ng-if="$index == 1" ng-init="randomFnc()">
{{$index}}<input type="text" value="" placeholder="{{placeholderText}}" />
</div>
<div ng-if="$index != 1">{{$index}}</div>
</div>
</div>
<track-digests></track-digests>
</div>

Call a method for 3 times because placeholder attribute or other attributes like this as class or ... can't define the ng- in angularjs, for solution we can use ng-init to handle it.
when you run the first you have repeat and then binding elements and then your angular attributes runs.
for best solution i refer to use model as object to binding placeholder on it, it's easily.
var app = angular.module('myApp', [])
app.controller('myCtrl', [
'$scope',
function($scope){
$scope.placeholder = "";
$scope.randomFnc = function (tab) {
$scope.placeholder = "Placeholder text";
}
$scope.tabs = [
"a",
"b",
"c"
];
//----2
$scope.randomFnc2 = function (tab) {
tab.placeholder = "Placeholder text";
}
$scope.tabs2 = [
{name: "a"},
{name: "b"},
{name: "c"},
];
}
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h1>better if you use model</h1>
<div ng-repeat="tab in tabs2">
<div ng-if="$index == 1" ng-init="randomFnc2(tab)">
{{$index}}
<input type="text" value="" placeholder="{{tab.placeholder}}"/>
</div>
<div ng-if="$index != 1">{{$index}}</div>
</div>
<h1>also you can</h1>
<div ng-repeat="tab in tabs">
<div ng-if="$index == 1" ng-init="randomFnc(tab)">
{{$index}}
<input type="text" value="" placeholder="{{placeholder}}"/>
</div>
<div ng-if="$index != 1">{{$index}}</div>
</div>
</div>
</div>

Why sometimes doesn't ng-init trigger $watch listener?

I execute the follow code in my app and sometimes ng-init doesn't trigger $watch. Any ideas?
HTML
<div ng-controller="MyCtrl">
<p ng-init="stages = 'coco'">{{x}}</p>
</div>
Controller
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.$watch("stages", function() {
alert($scope.stages);
});
}

No it does, according to your code you have not added ng-app anywhere.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope){
$scope.$watch("stages", function() {
alert($scope.stages);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<p ng-init="stages = 'coco'">{{x}}</p>
</div>

how to use $scope inside .on click event?

I'm very new to Angular js and am testing a few functions with a simple data-parser project (Plunkr). Right now, I'm having trouble accessing $scope variable within a jQuery on click event. I would like to keep some elements hidden until an image is clicked. While I can set ng-hide to true within the controller, $scope does not appear to work inside an on click handler. Please help.
zodiac.html
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div id="container" ng-app="myApp" ng-controller="myCtrl">
<div>
<h1>What Animal Are You?</h1>
<div id="selectPicture"></div>
</div>
<div id="zodiac" ng-hide="disappear">
<h1>Your Zodiac</h1>
<div id="your-zodiac">
</div>
<br>
<h1>Avoid these Animals</h1>
<div id="hateDiv">
</div>
<br>
<h1>These Are Your Besties</h1>
<div id="loveDiv">
</div>
</div>
<script src="scripts.js"></script>
</div>
</body>
scripts.js
function d(c) {
console.log(c)
}
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope, $http) {
$http.get('zodiac.json').success(function(data) {
$scope.disappear = true //WORKS HERE
$scope.animalsData = data
angular.forEach($scope.animalsData, function(item) {
$('#selectPicture').prepend('<img src="' + item.picture + '" alt="' + item.animal + '">')
})
$('#selectPicture').on('click', 'img', function($scope) {
$scope.disappear = false //DOES NOT WORK HERE
$('#zodiac div').empty();
findZodiac(this.alt, "#your-zodiac", true);
})
function findZodiac(animal, e, test) {
angular.forEach($scope.animalsData, function(item) {
if (item.animal == animal) { //look for the right object 'item', when found, get the image
//item.picture
$(e).prepend('<img src="' + item.picture + '">')
if (test == true) {
loveHate(item.hate, "#hateDiv")
loveHate(item.love, "#loveDiv")
}
return
}
})
}
function loveHate(array, e) {
angular.forEach(array, function(value) { //loops through an array, get each animal
findZodiac(value, e, false)
})
}
});
})

In my opinion you should not do DOM manipulation directly when using AngularJS. Use the directives provided by AngularJS instead. Here are the template and controller code if you do so -
zodiac.html
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div id="container" ng-app="myApp" ng-controller="myCtrl">
<div>
<h1>What Animal Are You?</h1>
<div id="selectPicture">
<img ng-repeat="animal in animalsData"
ng-src="{{animal.picture}}"
alt="{{animal.animal}}"
ng-click="disappear=false; findZodiac(animal)" />
</div>
</div>
<div id="zodiac" ng-hide="disappear">
<h1>Your Zodiac</h1>
<div id="your-zodiac">
<img ng-src="{{selectedAnimal.picture}}" alt="{{selectedAnimal.animal}}" />
</div>
<br>
<h1>Avoid these Animals</h1>
<div id="hateDiv">
<img ng-repeat="animal in selectedAnimal.hate"
ng-src="{{animal.picture}}"
alt="{{animal.animal}}" />
</div>
<br>
<h1>These Are Your Besties</h1>
<div id="loveDiv">
<img ng-repeat="animal in selectedAnimal.love"
ng-src="{{animal.picture}}"
alt="{{animal.animal}}" />
</div>
</div>
<script src="scripts.js"></script>
</div>
</body>
scripts.js
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope, $http) {
$scope.animalsData = [];
$scope.selectedAnimal = {};
$scope.disappear = true;
$scope.findZodiac = function(animal) {
$scope.selectedAnimal = animal;
};
$http.get('zodiac.json').success(function(data) {
$scope.animalsData = data;
});
});

In AngularJS $scope is a global variable for your controller, You don't need to pass it like this. directly use it as
$('#selectPicture').on('click','img',function(){
$scope.disappear=false;//this will work
$('#zodiac div').empty();
findZodiac(this.alt,"#your-zodiac",true);
})

check this corrected version
scope object only available in angular world.

AngularJs filtering data In the other Controller

I am using two controllers and a factory service to get the data from it. I want to filter the data in the second controller by input 'ng-model'. So i have written input ng-model in both the controllers (check index.html). Its working if i tried to enter the input data in the second controller input field, but its not working if i try filtering from first controller input ng-app.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="scripts/controller.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl">
<div style="float: left; width: 300px;">
<div ng-controller="checkBoxModuleCtrl">
<ul>
<li ng-repeat="item in chkBoxList" style="list-style: none;">
<input type="checkBox" value="{{item}}" ng-click="checkBoxClickHandler($index, $event)"> {{item}}
</li>
</ul>
<input type="text" ng-model="myText" />
</div>
</div>
<!--<input type="button" ng-click="checkBoxClickHandler()" value="Click Me!"> </input>-->
<div style="float: left; width: 400px; height: 600px; overflow-y: scroll;" >
<div>
<div ng-controller="panelCtrl">
<input type="text" ng-model="myText" />
<ul>
<li ng-repeat="panelItem in panelData|filter:myText" style="list-style: none;">
<div>
<b>Title </b/>: {{panelItem.name }}<br/>
<b>Channel-Type </b>: {{panelItem.type }}<br/>
<b>description </b>: {{panelItem.description }}
</div>
<hr weight="5" />
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
controller.js
var app = angular.module("app", ["checkBoxserviceModule"]);
app.controller('appCtrl', function($scope){
});
app.controller('checkBoxModuleCtrl', function($scope, externals){
$scope.chkBoxList = [];
$scope.init = function(){
$scope.chkBoxList = externals.getCheckBoxList()
};
$scope.init();
$scope.checkBoxClickHandler = function(itemIndex, event){
alert(event.currentTarget.value + "will be handling click listener for check box" + itemIndex)
}
});
app.controller("panelCtrl", function($scope, externals){
$scope.init = function(){
$scope.panelData = externals.getPanelData();
};
$scope.init();
$scope.customFilter = function(panelItem){
return panelItem.toUpperCase;
}
});
var checkBoxserviceModule = angular.module("checkBoxserviceModule", []);
checkBoxserviceModule.factory("externals", function(){
return{
getCheckBoxList : function(){
return [ "sports", "movies", "entertainment", "news" ]
},
getPanelData : function(){
//alert("in services")
return [
{
"name":"cinmax",
"type": "movies",
"description":"Some Tesxt"
},
{
"name":"setmax",
"type": "sports",
"description":"Some Tesxt"
},
{
"name":"mtv",
"type": "entertainment",
"description":"Some Tesxt"
},
{
"name":"ibn news",
"type": "news",
"description":"Some Tesxt"
}
];
}
};
});

Controllers use prototypical inheritance to share scope. So, you need to make sure the object you want inherited is an actual object in order for the reference to stay binded. If try to share a primitive from the scope, they will not be binded correctly and each controller will end up making it's own copy.
This might inherit correctly initially, but the binding will disconnect as soon as you change the value of the child's scope.number.
-ParentController
-scope.number = 4
-ChildController
-scope.number //will not stay binded to parent's scope
This on the otherhand, if you create an object on the scope, will inherit a reference to the object, and will stay binded in the child controller.
-ParentController
-scope.myObject.number = 4
-ChildController
-scope.myObject.number //will stay binded to parent's scope
Here is a better explanation: Why don't the AngularJS docs use a dot in the model directive?

AngularJS push item does not work

I have put all necessary files into a single file. I want to push item into array when the user clicks on a button. Here is the content:
When I click on the button, nothing happens. Also the data is not repeated/looped and {{}} is shown in angular which means there is a problem.
<script type="text/javascript" src="angular.js" ></script>
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
</div>
</div>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
<script type="text/javascript">
var App = angular.module("App", []);
App.controller("MyController", function($scope){
$scope.names = [
{ first : "Thomas"},
{ first : "Geferson"},
{ first : "Jenny"},
{ first : "Maria"},
];
$scope.AddName = function(){
$scope.names.push({
name : $scope.Namer.name;
});
};
});
</script>

Working DEMO
var App = angular.module("App", []);
App.controller("MyController", function ($scope) {
$scope.names = [{
first: "Thomas"
}, {
first: "Geferson"
}, {
first: "Jenny"
}, {
first: "Maria"
}];
$scope.AddName = function () {
$scope.names.push({
first: $scope.Namer.name
});
};
});
You need to move your data-ng-click inside Controller.Also you had some syntax issues.That is also i fixed (To work with IE ALSO)
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name" />
<input type="submit" data-ng-click="AddName()" />
</div>
</div>

Move your inputs to inside your MyController so that it executes code in the scope created by the controller:
<div data-ng-app="App">
<div data-ng-controller="MyController">
<ul data-ng-repeat="one in names">
<li>{{ one.first }}</li>
</ul>
<input type="text" data-ng-model="Namer.name"/>
<input type="submit" data-ng-click="AddName()"/>
</div>
</div>
Another mistake is that you need to change name to first to match with your existing object
$scope.AddName = function(){
$scope.names.push({
first : $scope.Namer.name //change to first and remove the ;
});
};
DEMO