Directive input value changing when calling directive multiple times - angularjs

Question

I have the following directive,
(function(){
angular.module("pulldownmodule")
.controller("pulldownCtrl",['pullDownServices','$scope',"multiselectDefaults","templates",function(pullDownServices,$scope,multiselectDefaults,templates){
//Local variables
_this = this;
var dropdownData = {};
var currentTemplate = {};
var firstTemplate;
//Validation function
function validateInput(){
console.log(_this.dropdownid);
if (_this.dropdownid) {
getPullDownData(_this.dropdownid,_this.filter);
}
//check if the dropdown ID is present
}
$scope.$watch('pulldownCtrl.dropdownid',function(newVal){
console.log(_this.dropdownid);
if (newVal) {
validateInput();
};
});
}])
.directive('pulldown', [function(){
return {
scope: {},
bindToController:{
dropdownid:"=",
filter:"=",
templatetype:"#"
},
controller:'pulldownCtrl',
controllerAs:'pulldownCtrl',
templateUrl: 'pulldown/html/dropDownDirective.html'
};
}]);
})()
I am calling the directive 2 times as follows
<div pulldown dropdownid="currentID" templatetype="template2" filter="customFilter"></div>
<div pulldown dropdownid="currentID2" templatetype="template2" filter="customFilter2"></div>
Passing the value of dropdownid in the controller as
$scope.currentID = 1;
$scope.currentID2 = 5;
The issue here is if i call the directive only 1 time everything works fine, but if i call it multiple times then i get the _this.dropdownid in $watch as the second directives value. Not sure what I'm doing wrong.
Probably i have to create a new instance using 'new'.
Directive HTML
Following is the major part of the directives HTML,
<select id="searchData" kendo-multi-select="pulldown" k-options="ddoptions" k-rebind="ddoptions" k-on-change="getChangevalue('searchData')"></select>
i'm using the kendo multiselect

Answer 1

As #hgoebl point out _this = this; it is kind of global (not application level) variable though you use in a function scope.
Use var _this = this;
//after assign "_this" is not accessible here
(function(){
//after assign "_this" is accessible here
angular.module("pulldownmodule")
.controller(...function(){
_this = this; //use var _this = this;
//...others code
});
}();

Answer 2

angular.module("pulldownmodule",[])
.controller("pulldownCtrl",['$scope',function($scope){
//Local variables
_this = this;
// Initialize your models here
$scope.currentID = '1';
$scope.currentID2 = '3';
var dropdownData = {};
var currentTemplate = {};
var firstTemplate;
//Validation function
function validateInput(){
console.log(_this.dropdownid);
if (_this.dropdownid) {
getPullDownData(_this.dropdownid,_this.filter);
}
//check if the dropdown ID is present
}
$scope.$watch('currentID', function (newVal) {
console.log($scope.currentID);
if (newVal) {
validateInput();
};
});
$scope.$watch('currentID2', function (newVal) {
console.log($scope.currentID2);
if (newVal) {
validateInput();
};
});
}])
.directive('pulldown', [function(){
return {
scope: {
dropdownid:"=",
filter:"=",
templatetype:"#"
},
template: '<select ng-model="dropdownid"> <option ng-repeat="a in [1,2,3,4,5]" value="{{a}}"> {{a}} </option> </select>',
link: function (scope,element, attr) {
scope.$watch("dropdownid", function (newVal) {
scope.dropdownid;
});
}
};
}]);