Как правильно запустить асинхронную функцию из сервиса?

Добрый день. Есть сервис с функцией которая загружает инфу из БД.

function getData($http) { 
         this.users = async function(){
            const connect = await $http.get('http://localhost:3000/getUsers')
            const data = await connect.data
            return data   
        } 
    }

Есть задача, просто показать информацию из БД в div. Функция сервиса вызывается из главного контроллера.

function MainCtrl($scope,$rootScope,$log,getDataServis, $http){
    const vm = this
 
   getDataServis.users()
   .then((res,rej)=>{
       vm.arr = res
   })
   vm.arr = (getDataServis.users())
  
   
    vm.clickFunction = function(name){
        console.log('hi')
    }

Интересная ситуация, если убрать строчку vm.arr = (getDataServis.users()), в приложении данные из базы появляются после нажатия на кнопку с функцией vm.clickFunction. Если строчку оставить, сначала в приложении появляется пустой объект {}, а потом сама информация.
Пожалуйста, кратко разъясните подкапотную работу angularjs и способа избежания вышеперечисленных проблемю
Заранее спасибо.