Chris Chris - 7 months ago 40
AngularJS Question

Getting value of ng-change field in my angularjs controller

I have this line in my view:

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="mySearch" ng-model-options="{debounce: 1000}">

And then inside my controller I have:

angular.module('app.controllers', [])

.controller('listViewCtrl', ['$scope', '$stateParams', '$http',
function ($scope, $stateParams, $http) {

then(function(response) {
$ =;

$scope.searchChange = function() {


But this is giving me "undefined".

How can I reference the value of the mySearch input field in my controller?


Your input field might be located within a sperate scope, which is not updated correctly. ngIf and ng-repeat are common examples for directives creating a seperate sub-scope. (See this article for more information around scopes)

Dotted scope variables

To protect youself from such issues you migth either store your variables inside objects.

<input placeholder="Search" type="text" ng-change="searchChange()" ng-model="" ng-model-options="{debounce: 1000}">

$ = {search: ""};
$scope.searchChange = function() {  

Named Controllers

Or name your controllers specificly as recommended in the angular style guide Y030.

Pass variable as parameter

A third option is simply passing the variable as parameter to the function:

<input placeholder="Search" type="text" ng-change="searchChange(mySearch)" ng-model="mySearch" ng-model-options="{debounce: 1000}">

$scope.searchChange = function(mySearch) {