AngularJS Chrome App - Select a local folder - not being displayed - angularjs

Question

I am developing an AngularJS Chrome app, and using the chrome.fileSystem.chooseEntry API, a user can choose a directory. I want to show the user the selected directory, also save the details into local storage to use it everytime the app load.
The former part - show the selected directory to the user does not seem to work.
Here's my template:
<div class="content" ng-controller="SelectCompanyController">
<form role="form">
<div class="form-group">
<strong>Add a New Company</strong>
</div>
<div class="form-group">
<label for="companyName">Enter Company Name</label>
<input id="companyName" type="text" class="form-control" ng-model="newCompany.companyName" style="width:80%"/>
</div>
<div class="form-group">
<label for="location" style="display: block">Select Company Folder Location</label>
<button id="location" ng-click="getUserSelectedFolder()">Choose Company Folder</button>
{{newCompany.location}}
</div>
</form>
</div>
My Controller:
app.controller('SelectCompanyController',['$scope','ReadLocalDBDataService',
function($scope, ReadLocalDBDataService){
$scope.newCompany={};
getUserSelectedFolder=function(){
ReadLocalDBDataService.getUserSelectedFolder().then(function(fileEntry){
chrome.fileSystem.getDisplayPath(fileEntry, function(displayPath){
console.log(displayPath);
$scope.newCompany.location=displayPath;
console.log($scope.newCompany);
});
});
};
$scope.getUserSelectedFolder=getUserSelectedFolder;
}]);
My service
app.factory('ReadLocalDBDataService',['$q', function($q){
var getUserSelectedFolder=function(){
var deferred=$q.defer();
chrome.fileSystem.chooseEntry({type: 'openDirectory'}, function(fileEntry){
if(!fileEntry) deferred.reject("Please select the folder where the Companys' files are present");
else{
var error = chrome.runtime.lastError;
if(error) deferred.reject("An error occurred while selecting the folder. Details: "+error);
else{
deferred.resolve(fileEntry);
}
}
})
return deferred.promise;
};
return {
getUserSelectedFolder: getUserSelectedFolder
};
}]);
In my controller, I have got logs showing that that folder has been set to something like ~/Dropbox/folder... Why is this not showing up on the screen?
Edit:
I just realised that, after I select the folder once, nothing happens, but if I select the folder again, then it shows up. Why is not showing up the first time?

Answer 1

Here's a response from a developer of the chrome.fileSystem APIs when I asked him to look at your question.
"This question might be written in such a way as to be to be easier to answer. (Its a lot easier when the user can reduce their problem down to a simple example.) I can't immediately find anything wrong with it, but it sounds like the Chrome API part is working fine, but the display isn't updating for some reason ("In my controller, I have got logs showing that that folder has been set to something like ~/Dropbox/folder... Why is this not showing up on the screen?"). I don't know Angular so I can't help with that."
It sounds like his suggestion is to
1.) Reduce the example down to something as simple as possible.
2.) Investigate why the display might not be updating the first time.