Develop Reference

http returns data but doesn't update view

I have this input field in my html:
<input type="text" spellcheck="false" id="widgetu1049_input"
name="custom_U1049" tabindex="3" placeholder="Search..." ng-model="searchText"
ng-change="getPostHttp()" ng-trim="false"/>
and i'm calling http post in a scope function:
$scope.getPageItems = function(callback){//TODO add county and state moudles
var search = {'searchText':$scope.searchText,'state' : $scope.currentState,'county' : ''};
var params = {'action':'getPageItems', 'currentPage':$scope.currentPage, 'pageSize':$scope.pageSize, 'search':search };
$http.post(EndPoint, params).then(function(response) {
var page=response.data;
console.log(page);
callback(page);
});
}
I'm calling the above function from this function:
$scope.getPostHttp = function(){
$scope.getPageItems(function(data) {
$scope.items = data;
});
}
I've got this approach from this question Angular $http returns data but doesn't apply to scope
And although it shows the items on an ng-init call I made, it does not update on the ng-change call above.
Any ideas?
EDIT: I'm adding the view of the ng-repeat call:
<tr style=" background-color: #BFBFBF;" ng-model="items" ng-class="{marked: isExists(item.id) == true}" ng-click="view(item.id)"
data-toggle="modal" data-target="#smallModal" ng-repeat="item in items" ng-animate="'animate'">
<td ng-show="id">{{item.id}}</td>
<td ng-show="fname">{{item.fname}}</td>
</tr>

Angular $scope function not working outside of ng-repeat

I have a <table> element, at which I declared a controller (only one in the app at the moment). I also have a ng-repeat on <tr> in the <tbody> element, which is working just fine, creating multiple table rows as intended. In the controller i have some api calls which are called for single table rows and which work just fine, and a function called from one of the <th>'s in <thead>, which I can't get to work. I know it's a scope thing, but I just can't grasp what I'm doing wrong.
To sum it up:
simplified html fragment:
<table ng-controller='myController'>
<thead>
<tr>
<th>Username</th>
<th><button ng-click='doStuff()'>Do stuff</button></th>
</tr>
</thead>
<tbody>
<tr ng-repeat='user in users'>
<td>{{user.name}}</td>
<td><button ng-click='delete(user)'>Delete</button>
</tr>
</tbody>
</table>
simplified js fragment:
app.controller('myController', ['$scope', '$http', users, function($scope, $http, users) {
//api call to get users, working fine
users.getAll().success(function(data) {
$scope.users = data;
});
//api call to delete users, also working fine
$scope.delete = function(user) {
users.delete(user).success(function() {});
};
//can't get this to fire
$scope.doStuff = function() {
alert('I do stuff');
};
}]);
Any insight would be helpful, thanks in advance!
EDIT
I assume the issue is comming from one of the modules, so I copied the whole thing into a plnkr. Sorry for the styling, removed it for more code simplicity.
EDIT 2
After studying the plnkr I came to see that it was an unclosed <div> element in the <thead>. Ouch. Thanks for the replies, and please excuse my carelessness.
EDIT 3
An even more carefull study revealed, that the problem has in fact been also lying in poorly designed jasmine unit tests.

It appears to be firing. I've had to simulate the asynchronous loading of users, but that shouldn't make a difference. Can you add a snippet to demonstrate the issue?
angular.module('app', []).controller('myController', ['$scope', '$http', '$timeout',
function($scope, $http, $timeout) {
//api call to get users, working fine
$timeout(function() {
$scope.users = [{
name: 'A'
}, {
name: 'B'
}];
}, 1000);
//api call to delete users, also working fine
$scope.delete = function(user) {
console.log('delete', user);
};
$scope.doStuff = function() {
console.log('I do stuff');
};
}
]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div ng-app="app">
<table ng-controller='myController'>
<thead>
<tr>
<th>Username</th>
<th>
<button ng-click='doStuff()'>Do stuff</button>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='user in users'>
<td>{{user.name}}</td>
<td>
<button ng-click='delete(user)'>Delete</button>
</tr>
</tbody>
</table>
</div>

Dynamic ng-click does not call function

I wish to make a dynamic table in AngularJS, but the problem is ng-click does not call the function.
Here is the fiddle : fiddle
Here is the code :
General template :
<div class="box">
<dynamic-table></dynamic-table>
</div>
Directive template :
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="column in columns" ng-bind="column.label"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in data">
<td ng-repeat="column in columns">
<!-- Problem is here (column[function] displays 'displayCategory') -->
<a href ng-click="column[function]()">{{ content[column.field] }}</a>
</td>
</tr>
</tbody>
</table>
Directive code :
app.directive('dynamicTable', function () {
return {
restrict: 'E',
templateUrl:'/template/Directive/dynamic-table.html',
scope: true,
link: ['$scope', function($scope) {
$scope.updateCategory = function() {
console.log("WOW");
};
}]
};
});
When I display : column[function], it shows updateCategory. I don't understand why when I click on it, the function is not launched...
Have you got an idea ?

That's because column[function] returns a string, not a reference to the function itself. You should call the function directly, like:
<td ng-repeat="column in columns">
<!-- Problem is here (column[function] displays 'displayCategory') -->
<a href ng-click="updateCategory (column)">{{ column.field }}</a>
</td>
and inside the directive to have something like:
controller: ['$scope', function($scope) {
$scope.updateCategory = function(columnData) {
console.log(columnData.field);
};
}]

Check demo: JSFiddle.
First of all, you link function declaration is not correct:
link: ['$scope', function($scope) {
$scope.updateCategory = function() {
console.log("WOW");
};
}]
It is the format of controller function. Change it to:
link: function($scope) { ... }
Angular will do the injection for you.
Secondly, specify a dispatcher function on the scope. Inside the dispatcher, determine which function to call:
$scope.dispatcher = function (column) {
var fn = column.function;
fn && angular.isFunction($scope[fn]) && $scope[fn]();
};
And specify ng-click="dispatcher(column)" in the HTML.

Please see this fiddle as maybe it will suit your needs.
http://jsfiddle.net/tep78g6w/45/
link:function(scope, element, attrs) {
scope.updateCategory = function() {
console.log("WOW");
};
scope.doSomething = function(func) {
var test = scope.$eval(func);
if(test)
test();
}
}
}
Also, link function has parameters that are sent to it, this is not a place to use DI. Please see in the fiddle the correct approach. As far as the dynamically calling the function, I went with different approach and it works. The approach you took is not going to work because you need a way for the string to be a function, it needs to have a reference to a function.

Where should I write general purpose controller function in angular.js?

I am writing some functions for check/uncheck all for table list and it is working fine,
Controller is,
invoiceApp.controller('itemController', ['$scope', 'itemService', '$route', function ($scope, itemService, $route) {
$scope.checkAllItem;
$scope.listItem = {
selected: []
};
$scope.checkUncheck = function () {
if ($scope.checkAllItem) {
$scope.listItem.selected = $scope.items.map(function (item) {
return item.id;
});
} else {
$scope.listItem.selected = [];
}
};
HTML TABLE,
<table id="dt_basic" class="table table-bordered table-hover" width="100%">
<thead>
<tr>
<th class="text-center" width="5%">
<input type="checkbox" name="checkbox-inline" ng-model="checkAllItem" ng-click="checkUncheck()">
<input type="checkbox" name="checkbox-inline" ng-click="uncheckAll()">
</th>
<th width="15%" ng-click="sort()">Name<i class="fa fa-sort small"></i></th>
<th width="65%">Description</th>
<th width="5%">Unit</th>
<th width="10%">Rate</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items" data-toggle="modal" data-target="#itemModel" ng-click="getItem(item.id)" style="cursor: pointer">
<td class="text-center">
<input type="checkbox" checklist-model="listItem.selected" checklist-value="item.id">
</td>
<td><a>{{item.name}}</a></td>
<td>{{item.description}}</td>
<td>{{item.unit}}</td>
<td>{{item.rate}}</td>
</tr>
</tbody>
</table>
It is working fine,Here my problem is,In my project I have many tables in different pages,I have to copy past this same code (Talking about Controller only ) to everywhere.Is there any method to write it generally?
I tried with $routescope,
but It is not working with ng-model,Is there any method to implement the same?

You could turn it into a service then inject the service to whichever controller needs it. You can now also include other commonly used functions used to manipulate data in those. See,
http://jsbin.com/madapaqoso/1/edit
app.factory("toolService", function(){
return {
checkUncheck: function(listItem) {
listItem.selected = [];
}
}
});
I didn't add the added complexity of your function, but you get the idea.
Alternatively, use a directive. I show it in the jsbin as well. Though, I'd prefer a service since services are made for managing data and directives are more concerned with DOM editing and binding $watchers/events etc. Or perhaps you could persist the data with a service, then use a custom directive to handle all the clicks on the table.

I have written a custom directive
invoiceApp.directive('checkUncheck', function () {
return {
restrict: 'E',
replace: true,
template: '<input type="checkbox" name="checkbox-inline" ng-model="checkAllItem" ng-click="checkUncheck()">',
link: function (scope) {
//check/uncheck and delete
scope.checkAllItem;
scope.listItem = {
selected: []
};
scope.checkUncheck = function () {
if (scope.checkAllItem) {
scope.listItem.selected = scope.items.map(function (item) {
return item.id;
});
} else {
scope.listItem.selected = [];
}
};
}
};
});
In HTML,
<check-uncheck></check-uncheck>
Now I can share checkUncheck function with most of table view in my project.

Simple $scope.$watch not called?

I have a simple table app which gets JSON data from a database. It passes the data via parameter to my app controller, which then filters the data. This works great. However, it is a lot of data (hundred thousand objects). I have search boxes that I use to try and filter the data, and when the search watch should be getting called (when someone types something in the search box), it doesn't. Am I missing something?
js:
var app = angular.module('SortingTables', ['ui.bootstrap']);
//Dependencies which are services, providers or factories must map to string types, which are then passed into the instance function
app.filter('startFrom', function () {
return function (input, start) {
start = +start; //parse to int
return input.slice(start);
};
});
app.controller('Ctrl', function ($scope, filterFilter, dataTable) {
$scope.currentPage = 1;
$scope.itemsPerPage = 25;
$scope.totalItems = 0;
$scope.predicate = '';
$scope.searchBuffer = {
$: ''
};
$scope.filtered;
//This function has sort of been abstracted...
//The purpose of this function is to delay the update so the user gets a chance to finish typing before the filter is applied.
//Newer versions of angularjs have the ng-model-options: debounce=100 but we can't use that since we have IE 8 on dev boxes
$scope.$watch('searchBuffer', function (term) {
console.log('The watch on searchBuffer was called');
$scope.filtered = filterFilter(dataTable, term);
$scope.totalItems = $scope.filtered.length;
});
$scope.pageChanged = function () {
$scope.currentRow = $scope.currentPage * $scope.itemsPerPage - $scope.itemsPerPage;
};
});
html
<div ng-app="Components" ng-controller="Ctrl">
<hr/>
<table class="table table-striped">
<tr>
<th>Technical Owner
<br />
<input type="search" ng-model="searchBuffer['Technical Owner']">
</a>
</th>
<th>Branch
<br />
<input type="search" style="width: 40px" ng-model="searchBuffer.Branch">
</a>
</th>
<th>Sub Pillar
<br />
<input type="search" ng-model="searchBuffer['Sub Pillar']">
</a>
</th>
<th>Path
<br />
<input type="search" ng-model="searchBuffer.Path">
</a>
</th>
<th>Name
<br />
<input type="search" ng-model="searchBuffer.Name">
</a>
</th>
<th>Description
<br />
<input type="search" ng-model="searchBuffer.Description">
</a>
</th>
</tr>
<tr ng-repeat="ComponetOwner in filtered | startFrom:currentPage | orderBy:predicate:reverse | limitTo:itemsPerPage">
<td>{{ComponetOwner["Technical Owner"]}}</td>
<td>{{ComponetOwner.Branch}}</td>
<td>{{ComponetOwner["Sub Pillar"]}}</td>
<td>{{ComponetOwner.Path}}</td>
<td>{{ComponetOwner.Name}}</td>
<td>{{ComponetOwner.Description}}</td>
</tr>
</table>
<pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></pagination>
</div>
When I type something in the search box, $watch doesn't get called. What's going on?

searchBuffer is an object. The third optional argument of $watch needs to be set to 'true' for watching objects/arrays (that is for deep watching).
Read this:
$watch an object

You can do $watchCollection which will watch all the objects within an object.
Not as deep as setting the third optional argument which is true for yout $watch function.
Here is a good blog about it: http://www.bennadel.com/blog/2566-scope-watch-vs-watchcollection-in-angularjs.htm