Develop Reference

Ng-repeat is not working if page is loaded dynamicly

I have this page;
<script>
angular.module('myapp', []).controller('categoryCtrl', function($scope) {
$scope.category = <? echo json_encode($myarr); ?>;
$scope.subcategory = <? echo json_encode($myarr2); ?>;
});
</script>
<div ng-app="myapp" ng-controller="categoryCtrl" id="cate-container">
<div ng-repeat="x in category" class="cate-holder">
<div class="cate-class" onClick="opensubcate(this)">{{x.isim}}</div>
<div class="subcate-holder">
<div ng-repeat="y in subcategory | filter:{kategori:x.isim}" class="subcate-class">{{y.isim}}</div>
</div>
</div>
<div id="list-holder">
</div>
</div>
And with ajax i call this page into #list-holder.
<script>
angular.module('myapplist', []).controller('listCtrl', function($scope) {
$scope.list = <? echo json_encode($myarr3); ?>;
});
</script>
<div ng-app="myapplist" ng-controller="listCtrl" id="list-container">
<div ng-repeat="i in list">{{i.isim}}</div>
</div>
Everything works great and it is coming with $scope.list is defined with what i got from database. But ng-repeat="i in list" is not working and printing {{i.isim}} as it is.
If I open the second page directly it prints the outputs of i.isim
And the ajax for those who doubt ajax is not working well =)
$('.subcate-class').click(function(){
var thissub = $(this).text();
var thiscate = $(this).parent('.subcate-holder').prev('.cate-class').text();
$.ajax({
url:"php/salelist.php",
data:{kategori:thiscate,altkategori:thissub},
type:'POST',
success: function(e){
$('#list-holder').html(e);
}
});
});

Ah, I see the problem now that you've shared your Ajax call. And yes, this Ajax call is the problem.
What you're doing wrong is that you use jQuery and Angular together. Don't do that, ever. These are concurrent technologies that really don't work the same way. Angular generates the DOM from data, jQuery manipulates the DOM. In other words, jQuery fetches your data, but Angular has no idea about it, so it doesn't react and doesn't update the view.
Not to mention that you are loading two libraries instead of one.
Solution : DROP jQuery and do things the Angular way (use the $http service), or DROP Angular and do everything the jQuery's way.

pass the php variable values through ng-init function and then assign the list.
<div ng-app="myapplist" ng-controller="listCtrl" id="list-container"
ng-init="loadList('<? echo json_encode($myarr3); ?>')">
<div ng-repeat="i in list">{{i.isim}}</div>
</div>
angular.module('myapplist', []).controller('listCtrl', function($scope) {
$scope.list;
$scope.loadList($scope.list)
});

I have solved the problem with a bit of research. The ajax was not the main problem but the main problem was having two ng-app. The first one is rendering it-self automaticly but the second one doesnt render on document onload. Ajax was not the main problem as tried to predefine $scope.list and remove ajax, there was still ng-repeat problem. Then I understand the problem was second ng-app. I converted two page format into one page and removed second ng-app and put them all into first ng-app. Then I decided to use $http of angular, instead of $.ajax of jquery because there was no way to put $.ajax response into angulars $scope.list. The final is this;
PS: ng-repeat doesnt need any $apply or something because when var change it renders again automaticlly.
<script>
angular.module('myapp', []).controller('categoryCtrl', function($scope, $http) {
$scope.category = <? echo json_encode($myarr); ?>;
$scope.subcategory = <? echo json_encode($myarr2); ?>;
$scope.liste;
$scope.clickfunc = function(e){
$scope.thissub = $(e).text();
$scope.thiscate = $(e).parent('.subcate-holder').prev('.cate-class').text();
$http({
method : "POST",
url : "php/salelist.php",
params:{kategori:$scope.thiscate,altkategori:$scope.thissub}
}).then(function mySuccess(response) {
$scope.liste = response.data.list;
}, function myError(response) {
$scope.liste = response.statusText;
});
}
});
</script>
<div ng-app="myapp" ng-controller="categoryCtrl" id="cate-container">
<div ng-repeat="x in category" class="cate-holder">
<div class="cate-class" onClick="opensubcate(this)">{{x.isim}}</div>
<div class="subcate-holder">
<div ng-repeat="y in subcategory | filter:{kategori:x.isim}" class="subcate-class" ng-click="clickfunc($event.target)" onClick="showem()">{{y.isim}}</div>
</div>
</div>
<div id="list-holder">
<div id="list-container">
<div id="back" onClick="goback()"><</div>
<input type="text" ng-model="filterem" id="filterem" placeholder="Ara...">
<table class="urun-table">
<tr><th width="31%"></th><th width="10%">Kategori</th><th width="10%">Altkategori</th><th width="31%">İsim</th><th width="7%">Stok</th><th width="11%">Fiyat</th></tr>
</table>
<div id="table-scroll">
<table class="urun-table">
<tr ng-repeat="i in liste | filter:filterem" class="urun-holder">
<td width="33%"><img src="urun/{{i.resim}}" class="urun-img"></td>
<td width="10%" class="urun-cate">{{i.kategori}}</td>
<td width="10%" class="urun-sub">{{i.altkategori}}</td>
<td width="33%" class="urun-name" onClick="details(this)">{{i.isim}}</td>
<td width="7%" class="urun-price">{{i.stok}}</td>
<td width="7%" class="urun-stock">{{i.fiyat}} TL</td>
<td style="display:none" width="0" class="feed">{{i.feed}}</td>
<td style="display:none" width="0" class="origin">{{i.origin}}</td>
<td style="display:none" width="0" class="feature">{{i.feature}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>

Show html tags on the page with ng-bind-html

Please see below given code:
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
$scope.myText = "My name is: <h1>John Doe</h1>";
});
</script>
The output is: My Name is:
John Doe
How can i show the text as it is. For example: My Name is : <h1>John Doe</h1>
I want to show the HTML tags on the page.

Please use the $sce of angularjs.
var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope, $sce) {
$scope.myText = $sce.trustAsHtml("My name is: <h1>John Doe</h1>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyController'>
<p ng-bind-html="myText"></p>
</div>
Reference:
How to use $sce

First create a filter using $sce:
app.filter("html", ['$sce', function($sce) {
return function(input){
return $sce.trustAsHtml(input);
}
}]);
Then:
<div ng-bind-html="myText | html"></div>

Use ng-bind instead ng-bind-html
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="myText"></p>
</div>
Or simply
<p>{{myText}}</p>

I think you should use like this
in your controller
$scope.mytext="&lth1&gtJohn Doe&lt/h1&gt"
in you html page
<p ng-bind-html="myText"></p>

View Source functionality using AngularJS

The feature I'm trying to implement is a toggle view source button so the user can view the source of a given element then copy the text.
Using the ngRoute module, my views are coming through ng-view:
<div id="code" ng-view=""></div>
I would like the HTML to be output to:
<div id="html-text-output"></div>
I've tried using the $sanitize function but I'm not sure it is appropriate for my solution. Below is the code currently in my controller:
angular.module('App')
.controller('outputHtmlCtrl', function ($scope, $element, $sanitize) {
$scope.isOutputToggled = true;
var sanatizedHtml = $sanitize($('#email-frame-code').html());
$scope.toggleHtmlOutput = function() {
$scope.isOutputToggled = $scope.isOutputToggled === false ? true: false;
$('#html-text-output').append("<div>"+"'"+sanatizedHtml+"'"+"</div>");
}
});
My markup is below:
<div id="email-frame-code__container" ng-controller="outputHtmlCtrl">
<div class="browser-header">
<span class="browser-header__icon" ng-click="toggleHtmlOutput()"></span>
</div>
<div id="email-frame-code" ng-class="{closed: isOutputToggled}">
<div id="html-text-output"></div>
<div id="code" ng-view=""></div>
</div>
</div>
My end goal for this is like the 'Fancy Version' here: https://css-tricks.com/examples/ViewSourceButton/
But on a target element, not the whole page.

AngularJS Dynamic Template with indexed scope variable arrays

I'm using AngularJS and trying to create a form where I can dynamically add new inputs, similar to this fiddle: http://jsfiddle.net/V4BqE/ (Main HTML below, working code in fiddle).
<div ng-app="myApp" ng-controller="MyCtrl">
<div add-input>
<button>add input</button>
</div>
</div>
I would like to be able to use a HTML template for my form since the input I'm adding is ~300 lines long. My issue is I cannot figure out how to index the scope variable containing the data when used in a template. I've tried to make my own modified version of the above code on plnkr http://plnkr.co/edit/4zeaFoDeX0sGTuBMCQP2?p=info . However, when I click the button no form elements appear.
Online (plnkr) I get a 404 not found for my template.html, but I think that is just a plnkr limitation. On my machine with a Python HttpServer I get an Error: [$parse:syntax] for the $templateRequest and a TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. when using the $http.get method.
Any advice for getting the indexed scope variable array to work with an external html file?
Thanks, JR
Edit: Update plnkr link

You can do it without directive & external template
what you are trying to do does not require a directive (it actually much simple with the basic angularjs tools)
http://plnkr.co/edit/LVzGN8D2WSL2nR1W7vJB?p=preview
html
<body>
<div class="container" ng-app="myApp" ng-controller="MyCtrl">
<button class="btn btn-primary" type="button" ng-click="addPhoneInput()">add input</button>
<form>
<div ng-repeat="item in telephoneNumbers">
<hr>
<input type="text" ng-model="item.phone">
</div>
</form>
<hr>
<div class="well">
<h4>Phone Numbers,</h4>
<p ng-repeat="item in telephoneNumbers">{{item.phone}}</p>
</div>
</div>
</body>
js
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
// Define $scope.telephone as an array
$scope.telephoneNumbers = [];
$scope.addPhoneInput = function() {
$scope.telephoneNumbers.push({});
};
// This is just so you can see the array values changing and working! Check your console as you're typing in the inputs :)
$scope.$watch('telephoneNumbers', function(value) {
console.log(value);
}, true);
}]);
If you insist using a directive,
http://plnkr.co/edit/BGLqqTez2k9lUO0HZ5g1?p=preview
phone-number.template.html
<div>
<hr>
<input type="text" ng-model="ngModel" >
</div>
html
<body>
<div class="container" ng-app="myApp" ng-controller="MyCtrl">
<button class="btn btn-primary" type="button" ng-click="addPhoneInput()">add input</button>
<form>
<phone-number ng-repeat="item in telephoneNumbers" ng-model="item.phone"></phone-number>
</form>
<hr>
<div class="well">
<h4>Phone Numbers,</h4>
<p ng-repeat="item in telephoneNumbers">{{item.phone}}</p>
</div>
</div>
</body>
js
var app = angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', function($scope) {
// Define $scope.telephone as an array
$scope.telephoneNumbers = [];
$scope.addPhoneInput = function() {
$scope.telephoneNumbers.push({});
};
// This is just so you can see the array values changing and working! Check your console as you're typing in the inputs :)
$scope.$watch('telephoneNumbers', function(value) {
console.log(value);
}, true);
}]);
app.directive('phoneNumber', function(){
return {
replace:true,
scope: {
ngModel: '=',
},
templateUrl: "phone-number.template.html"
}
});

Angular ngchange doesn't fire for <pre contenteditable="true">

I'm trying to get a tag to fire the ng-change event but to no avail. The purpose is to watch changes to post.content. The code is pretty straightforward and parts of it are omitted for brevity, but it's basically a ng-template that is repeated like so:
<li ng-repeat="post in posts" data-id="[[post.id]]" data-rank="[[post.sortrank]]" class="post">
<ng-include src="post.template"></ng-include>
</li>
The repeated template:
<script type="text/ng-template" id="postText.html">
<pre ng-blur="savePost($event, post)" ng-change="changePost()" ng-model="post.content" class="postText" contenteditable="true">[[post.content]]</pre>
</script>
The JS:
$scope.savePost = function($event, post) { //This fires correctly
console.log($event);
console.log(post);
};
$scope.changePost = function() { //This doesn't fire at all
console.log("changed!");
};
Can this be because of the contenteditable attribute? Because I can get the ngChange examples working on the Angular tutorial site.

You can use akatov's angular-contenteditable.js.
From the docs... JS:
angular.module('myapp', ['contenteditable'])
.controller('Ctrl', ['$scope', function($scope) {
$scope.model="<i>interesting</i> stuff"
}])
HTML:
<div ng-controller="Ctrl">
<span contenteditable="true"
ng-model="model"
strip-br="true"
select-non-editable="true">
</span>
</div>
Plunker