using callbacks instead of promises for angular websocket service

gistfile1.js

angular.module('MyApp').factory('MyService', ['$q', function($q) {
    // We return this object to anything injecting our service
    var Service = {};
    // Keep all pending requests here until they get responses
    var callbacks = {};
    // Create a unique callback ID to map requests to responses
    var currentCallbackId = 0;
    // Create our websocket object with the address to the websocket
    var ws = new WebSocket("ws://localhost:8000/socket/");
    
    ws.onopen = function(){  
        console.log("Socket has been opened!");  
    };
    
    ws.onmessage = function(message) {
        listener(message);
    };

    function sendRequest(request, callback) {
      var defer = $q.defer();
      var callbackId = getCallbackId();
      callbacks[callbackId] = {
        time: new Date(),
        cb:defer
      };
      request.callback_id = callbackId;
      console.log('Sending request', request);
      ws.send(JSON.stringify(request));
      if(typeof callback == 'function') {
        defer.promise.then(function(data) {
          callback(null, data);
        },
        function(error) {
          callback(error, null);
        });
      }
      return defer.promise;
    }

    function listener(data) {
      var messageObj = data;
      console.log("Received data from websocket: ", messageObj);
      // If an object exists with callback_id in our callbacks object, resolve it
      if(callbacks.hasOwnProperty(messageObj.callback_id)) {
        console.log(callbacks[messageObj.callback_id]);
        $rootScope.$apply(callbacks[messageObj.callback_id].cb.resolve(messageObj.data));
        delete callbacks[messageObj.callbackID];
      }
    }
    // This creates a new callback ID for a request
    function getCallbackId() {
      currentCallbackId += 1;
      if(currentCallbackId > 10000) {
        currentCallbackId = 0;
      }
      return currentCallbackId;
    }

    // Define a "getter" for getting customer data
    Service.getCustomers = function(callback) {
      var request = {
        type: "get_customers"
      }
      // Storing in a variable for clarity on what sendRequest returns
      var promise = sendRequest(request, callback); 
      return promise;
    }

    return Service;
}])

The idea is you can use callbacks like this:

Service.getCustomers(function(error, data){
//Do stuff here....
});

but you also lose the benefit of promises in the template, which is an awesome feature of angular.

Thank you for your kind example!
But, may I ask why this callback method loses the benefit of promises?
It seems like above example is still using the promise(with $q service).
I hope I could know what I missed.