Tom Krones Tom Krones - 4 months ago 12
Javascript Question

Why is my ng-model variable undefined in controller?

I'm having trouble with $scope in my angular js project. When I use ng-model="modelExample" on an input field for example, I can't access it in my js using $scope.modelExample. Has anyone else had a similar problem?

It's bizarre, a function is called but ng-model doesn't bind. See my code below, the function refreshResults() is called when I submit the form but $scope.search returns as undefined.

angular.module('starter',
['ionic',
'starter.controllers',
'starter.filters',
'akoenig.deckgrid',
"angucomplete",
// 'ui.bootstrap',
'starter.services'])

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})

.state('app.browse', {
url: "/browse",
views: {
'menuContent' :{
templateUrl: "templates/browse.html",
controller: 'BrowseCtrl'
}
}
})

.state('app.search', {
url: "/search",
views: {
'menuContent' :{
templateUrl: "templates/search.html",
controller: 'SearchCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/browse');
});


angular.module('starter.controllers', [])
.controller('SearchCtrl', function($scope) {
$scope.refreshResults = function() {
console.log($scope.search);
};
})


<ion-view>
<ion-content class="has-header">
<form ng-submit="refreshResults()" class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search..." ng-model="search">
</label>
</form>
</ion-content>
</ion-view>

Answer

@DavidTryon solved my issue in the comments. I was using scope wrong. I needed to use an object not a string. In other words I need to do something like ng-model="search.term" not ng-model="search" and use it in the js like this: $scope.search.term. It has to do with inheritance but long story short, if your ng-model doesn't have a dot (.) in it, you're doing it wrong.

Here's more info: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html

Thanks David!

Tom