phew phew - 1 year ago 104
AngularJS Question

How to sync controller with Service

I'm testing the communication of angular and SQLite. I need to get the ID and NAME of the selected company from database when the User access the page. I'm using the ion-autcomplete to select the company in the CRUD page.

Service: sqlite.js

(function () {

'use strict';

.service('$sqliteService', $sqliteService);

$sqliteService.$inject = ['$q', '$cordovaSQLite'];
function $sqliteService($q, $cordovaSQLite) {

var self = this;
var _db;

self.db = function () {
if (!_db) {
if (window.sqlitePlugin !== undefined) {
_db = window.sqlitePlugin.openDatabase({ name: "my.db", location: 2, createFromLocation: 1 });
} else {
// For debugging in the browser
_db = window.openDatabase("my.db", "1", "Database", 200000);
return _db;

self.getFirstItem = function (query, parameters) {
var deferred = $q.defer();
self.executeSql(query, parameters).then(function (res) {

if (res.rows.length > 0)
return deferred.resolve(res.rows.item(0));
return deferred.reject("There aren't items matching");
}, function (err) {
return deferred.reject(err);

return deferred.promise;

Factory: CompanyService.js

(function () {

'use strict';

.factory('CompanyService', CompanyService);

CompanyService.$inject = ['$q', '$sqliteService'];
function CompanyService($q, $sqliteService) {

return {
getId: function (Id) {

var query = "Select * FROM Company WHERE ID = ?";
var values = [Id];

return $q.when($sqliteService.getFirstItem(query, values));

Controller: CompanyController.js

(function() {
'use strict';

.controller('CompanyEditController', CompanyEditController);

CompanyEditController.$inject = ['$scope', '$q', '$stateParams', '$state', '$cordovaCamera', '$cordovaImagePicker', '$ionicPopup', 'CompanyService'];
function OcorrenciaEditController($scope, $q, $stateParams , $state, $cordovaCamera, $cordovaImagePicker, $ionicPopup, CompanyService) {

var vm = $scope;

vm.modelToItemMethod = function (modelValue) {
var d = $q.defer();
.then(function(data) {
console.log('My first promise succeeded', JSON.stringify(data));
}, function(error) {
console.log('My first promise failed', error.message);
return d.promise;


<input ion-autocomplete ng-model="company.IdCompany" type="text" name="fieldEmpresa" placeholder="Empresa" readonly="readonly" class="ion-autocomplete" autocomplete="off" max-selected-items="1" required

I don't undestand why I need to use de "$q.defer" inside the controller if i'm using inside de Factory and Service. If I don't use, controller can't return the value to ion-aucomplete. Am i missing something? Or the code is right?

Answer Source

You are binding this method to auto complete; as ajax call is asynchronous, you gotta return a primise. Thats the reason why you ended up using $q.defer.

If you dont want to use $q, then instead of using $q.defer , you can just do return CompanyService.getId(modalValue); in your VM.modelToItemMethod which inturn returns a deferred object.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download