How to set ng-model variable from custom validation directive - angularjs

Question

How to call controller scope from angularjs directive outside link function
$scope is unknown provider here:
app.directive('checkId', function($parse,$scope, $http){//here $scope is unknown provider
return{
restrict:'A',
link: function(scope, element, attrs){
element.bind('change', function(){
var filteredLength = $parse(attrs.filtered)(scope);
console.log(filteredLength);
var newFilteredArray = scope.stateList.filter(function(values){
return values.toUpperCase() == scope.TRDetail.memberNo.toUpperCase();
});
if(filteredLength == 0){
console.log("if called");
scope.TRDetail.memberNo = "";
}else if(newFilteredArray.length == 0){
scope.TRDetail.memberNo = "";
};
scope.$apply();
thisIsCalled(scope.TRDetail.memberNo);
});
}
};
function thisIsCalled(someData){
if(someData == ""){
alert("NOT doing some $http srvices");
}else{
$http.post("SomeURL", someData).then(function(response, error){
if(error){
alert("sorry no data found" + error.message);
}else{
$scope.TRDetail.memberName = response.data;
}
});
};
};
});
HTML:
<div class="form-group col-md-3">
<label>MemberShip NO:<span ng-if="(stateList|filter:TRDetail.memberNo).length==0" style="color:red;">(nothing found)</span></label>
<input list="idList" class="form-control" name="browser"
ng-model="TRDetail.memberNo"
filtered="(stateList|filter:TRDetail.memberNo).length"
check-id>
<datalist id="idList">
<option ng-repeat="x in stateList">{{x}}</option>
</datalist>
</div>
<div class="form-group col-md-9">
<label>Member Name</label>
<input type="text" ng-disabled="true"
ng-model="TRDetail.memberName" class="form-control"
placeholder="type name here..">
</div>
I am unable to update TRDetail.memberName outside from link function.
any help, how to do?

Answer 1

tl; dr;
Use ngModel.$setViewValue
When a custom directive is combined with ng-model directive, the directive should use the ngModelController API:
app.directive('checkId', function($parse,$http){
return{
require: 'ngModel',
restrict:'A',
link: function(scope, element, attrs, ngModel){
̶e̶l̶e̶m̶e̶n̶t̶.̶b̶i̶n̶d̶(̶'̶c̶h̶a̶n̶g̶e̶'̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶{̶
ngModel.$viewChangeListeners.push(onChange);
function onChange(){
if (!ngModel.$modelValue) return;
var filteredLength = $parse(attrs.filtered)(scope);
console.log(filteredLength);
var newFilteredArray = scope.stateList.filter(function(values){
̶r̶e̶t̶u̶r̶n̶ ̶v̶a̶l̶u̶e̶s̶.̶t̶o̶U̶p̶p̶e̶r̶C̶a̶s̶e̶(̶)̶ ̶=̶=̶ ̶s̶c̶o̶p̶e̶.̶T̶R̶D̶e̶t̶a̶i̶l̶.̶m̶e̶m̶b̶e̶r̶N̶o̶.̶t̶o̶U̶p̶p̶e̶r̶C̶a̶s̶e̶(̶)̶;̶
return values.toUpperCase() == ngModel.$modelValue.toUpperCase();
});
if(filteredLength == 0){
console.log("if called");
̶s̶c̶o̶p̶e̶.̶T̶R̶D̶e̶t̶a̶i̶l̶.̶m̶e̶m̶b̶e̶r̶N̶o̶ ̶=̶ ̶"̶"̶;̶
ngModel.$setViewValue("");
}else if(newFilteredArray.length == 0){
̶s̶c̶o̶p̶e̶.̶T̶R̶D̶e̶t̶a̶i̶l̶.̶m̶e̶m̶b̶e̶r̶N̶o̶ ̶=̶ ̶"̶"̶;̶
ngModel.$setViewValue("");
};
̶s̶c̶o̶p̶e̶.̶$̶a̶p̶p̶l̶y̶(̶)̶;̶
̶t̶h̶i̶s̶I̶s̶C̶a̶l̶l̶e̶d̶(̶s̶c̶o̶p̶e̶.̶T̶R̶D̶e̶t̶a̶i̶l̶.̶m̶e̶m̶b̶e̶r̶N̶o̶)̶;̶
thisIsCalled(ngModel.$modelValue);
}
function thisIsCalled(someData){
if(someData == ""){
alert("NOT doing some $http srvices");
}else{
$http.post("SomeURL", someData)
.then(function(response){
ngModel.$setViewValue(response.data);
})
.catch(function(error) {
alert("sorry no data found" + error.status);
});
};
}
}
};
For more information, see
AngularJS ngModelController API Reference

Answer 2

Your function thisIsCalled(someData) is just not living inside your angular app. You should get access to the $scope element through the directive's controller:
angular.directive('checkId', function($parse, $scope, $http) {
return {
restrict: 'A',
link: //your link stuff
controller: myController
};
});
function myController($scope) {
//here you can access the scope
}