why scope variable is not accessible in angular components - angularjs

Question

I have written a angular directive to read the file input data. However the updated scope variable is not accessible when I click on update button. why I am unable to access the file variable that is updated in ngFileSelect directive?
JS
// Define the `changeWord` module
angular.module('changeWord', []);
/// <reference path="changeWord.component.js" />
angular.
module('changeWord').
component('changeWord', {
templateUrl: 'change-word/change-word.template.html',
controller: function ChangeWordController($scope, dictionaryService) {
var self = this;
//$rootScope.loggedIn = $cookies.get('loggedIn');
self.formShowing = false;
$scope.search = function () {
dictionaryService.getWordsStartWith(self.searchText, function (r) {
self.searchResults = r;
});
};
$scope.change = function (id) {
dictionaryService.getWord(id, result => {
self.key = id;
self.word = result.word;
self.wordInEnglish = result.wordInEnglish;
self.pronunciation = result.pronunciation;
var syns ='';
angular.forEach(result.synonyms, a =>{
syns += (syns == '') ? a.wordInEnglish : ', ' + a.wordInEnglish;
})
self.synonyms = syns;
syns = '';
angular.forEach(result.antonyms, a => {
syns += (syns == '') ? a.wordInEnglish : ', ' + a.wordInEnglish;
})
self.antonyms = syns;
});
}
$scope.clear = function () {
angular.element(document.querySelector('#pFile')).val(null);
self.word = '';
self.wordInEnglish = '';
self.pronunciation = '';
self.synonyms = '';
self.antonyms = '';
};
$scope.update = function () {
dictionaryService.deleteWord(self.key);
// unable to access the scope here
dictionaryService.addNewWord(self.word, self.wordInEnglish, self.pronunciation, $scope.file, self.synonyms, self.antonyms);
this.clear();
self.formShowing = false;
}
}
}).directive("ngFileSelect", function () {
return {
link: function ($scope, el) {
el.bind("change", function (e) {
$scope.file = (e.srcElement || e.target).files[0];
//$scope.update();
})
}
}
});
HTML
<div ng-cloak>
<form name="changeForm" button-form ng-submit="update()" ng-if="$ctrl.formShowing">
<md-card flex flex-gt-md="70">
<md-card-header>
<md-card-avatar>
<md-icon class="md-avatar-icon">edit</md-icon>
</md-card-avatar>
<md-card-header-text>
<span class="md-title">Change Existing Word</span>
<span class="md-subhead">in kannada dictionary</span>
</md-card-header-text>
</md-card-header>
<md-card-content>
<md-input-container class="md-block">
<input name="word" ng-model="$ctrl.word" placeholder="Word in Kannada" required />
<div ng-messages="changeForm.word.$error" ng-show="changeForm.word.$dirty" role="alert">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<input name="wordInEnglish" ng-model="$ctrl.wordInEnglish" placeholder="Word in English" disabled />
<div ng-messages="changeForm.wordInEnglish.$error" ng-show="changeForm.wordInEnglish.$dirty" role="alert">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<p flex layout="row">
<md-input-container class="md-block" flex="50">
<input ng-model="$ctrl.pronunciation" placeholder="Pronunciation" />
</md-input-container>
<md-input-container class="md-block" flex="50">
<input id="pFile" type="file" ng-File-Select accept="audio/*" capture aria-label="Pronunciation Audio">
</md-input-container>
</p>
<md-input-container class="md-block">
<textarea ng-model="$ctrl.synonyms" placeholder="Synonyms"></textarea>
</md-input-container>
<md-input-container class="md-block">
<textarea ng-model="$ctrl.antonyms" placeholder="Antonyms"></textarea>
</md-input-container>
</md-card-content>
<md-card-actions>
<md-button class="md-raised md-primary" type="submit">Save</md-button>
<md-button class="md-accent" ng-click="$ctrl.formShowing = !$ctrl.formShowing">Cancel</md-button>
</md-card-actions>
</md-card>
</form>
<md-content class="md-padding">
<form name="searchForm" button-form ng-submit="search()">
<md-input-container md-no-float class="md-block">
<input name="searchText" ng-model="$ctrl.searchText" type="text" placeholder="Search">
<md-icon style="display:inline-block;" type="submit">search</md-icon>
<div class="hint" ng-show="searchForm.searchText.$dirty">Press Enter to search</div>
</md-input-container>
</form>
<md-list flex>
<md-list-item class="md-2-line" ng-repeat="result in $ctrl.searchResults" ng-click="null">
<div class="md-list-item-text" layout="column">
<h3>{{ result.wordInEnglish }}</h3>
<p>{{ result.word }}</p>
<md-button name="ch" class="md-raised md-primary md-secondary" ng-click="$ctrl.formShowing=!$ctrl.formShowing; change(result.$id);">Change</md-button>
</div>
</md-list-item>
</md-list>
</md-content>
</div>

Answer 1

Perfect, $scope is not existing in component. Need to use keyword this