Why is 'this' different things in two different functions? - angularjs

Question

I have a problem where this isn't what I expect it to be, but I can't figure out why after hours of ripping my hair out. From what I understand this should be the same this in both functions, but it isn't. This causes my custom select to not update the label when you select something else in the dropdown because getCurrentOption always returns undefined since it tries to access .currentOption from the wrong this object.
Can someone explain what is happening here? And how to make it so that I pass the same this object to the two functions?
co-select.html:
<div class="co-select-form-control">
<label class="co-inset-label" ng-bind="label"></label>
<ul class="list-reset" ng-class="{'co-select': !label, 'co-select-labeled': label}">
<li ng-click="co.toggleSelect(this)" class="co-select-option clickable">
<span ng-bind="co.getCurrentOption(this) || default"></span>
<ul ng-show="co.isSelectToggled(this)" class="list-reset bg-light co-select-dropdown">
<li ng-repeat="option in list" ng-if="option !== co.getCurrentOption(this)"
ng-click="co.selectOption(this, option)" ng-bind="option" class="co-select-option"></li>
</ul>
<span class="co-select-icon">
<i class="icon icon-keyboard-arrow-{{co.isSelectToggled(this) ? 'up' : 'down'}}"></i>
</span>
</li>
</ul>
</div>
co-select directive:
coForms.directive('coSelect', [function() {
return {
restrict: 'E',
scope: {
default: '=',
list: '=',
label: '#'
},
controller: 'CoFormsCtrl',
controllerAs: 'co',
templateUrl: 'app/views/components/co-forms/co-select.html',
link: function(scope, element, attrs) {
}
};
}]);
The controller:
coForms.controller('CoFormsCtrl', [function() {
var coForms = this;
/* View functions */
coForms.toggleSelect = function(select) {
select.isToggled = !select.isToggled;
};
coForms.isSelectToggled = function(select) {
return select.isToggled ? true : false;
};
coForms.selectOption = function(select, option) {
select.currentOption = option;
console.log(select);
};
coForms.getCurrentOption = function(select) {
console.log(select);
return select.currentOption;
};
}]);
The console.log from within coForms.getCurrentOption shows this to be:
While the console.log from within coForms.selectOption shows this to be:
How I use this directive:
<co-select list="['option 1', 'option 2', 'option 3']" default="'option 1'"></co-select>

Answer 1

In Angular expressions this is a special word and refers to the scope on which the expression is being evaluated. Since ng-repeat creates a new scope, scope inside and outside it will be different.
Using this in expressions can be rarely required, and this case isn't an exception.

Answer 2

That's because ng-repeat creates a new scope (if i'm correct, it extends the parent scope), your selectOption is called inside ng-repeat so this represents that scope.
You shouldn't be using controller functions this way (passing this as parameter). You should make a variable "select" in your scope and use that.
This should work (see this plunkr: http://plnkr.co/edit/Javqd1zoKbubHEUD2Ea9?p=preview ) :
coForms.directive('coSelect', [function() {
return {
restrict: 'E',
scope: {
default: '=',
list: '=',
label: '#'
},
controller: 'CoFormsCtrl',
controllerAs: 'co',
templateUrl: 'app/views/components/co-forms/co-select.html',
link: function(scope, element, attrs) {
}
};
}]);
coForms.controller('CoFormsCtrl', ['$scope', function($scope) {
var coFormsCtrl = this;
coFormsCtrl.select={
isToggled: true,
currentOption:$scope.default
};
/* View functions */
coFormsCtrl.toggleSelect = function() {
coFormsCtrl.select.isToggled = !coFormsCtrl.select.isToggled;
};
coFormsCtrl.isSelectToggled = function() {
return coFormsCtrl.select.isToggled ? true : false;
};
coFormsCtrl.selectOption = function(option) {
coFormsCtrl.select.currentOption = option;
console.log(coFormsCtrl.select);
};
coFormsCtrl.getCurrentOption = function() {
console.log(coFormsCtrl.select);
return coFormsCtrl.select.currentOption;
};
}]);
And the template:
<div class="co-select-form-control">
<label class="co-inset-label" ng-bind="label"></label>
<ul class="list-reset" ng-class="{'co-select': !label, 'co-select-labeled': label}">
<li ng-click="co.toggleSelect()" class="co-select-option clickable">
<span ng-bind="co.getCurrentOption() || default"></span>
<ul ng-show="co.isSelectToggled()" class="list-reset bg-light co-select-dropdown">
<li ng-repeat="option in list" ng-if="option !== co.getCurrentOption()"
ng-click="co.selectOption(option)" ng-bind="option" class="co-select-option"></li>
</ul>
<span class="co-select-icon">
<i class="icon icon-keyboard-arrow-{{co.isSelectToggled() ? 'up' : 'down'}}"></i>
</span>
</li>
</ul>
</div>