Angularjs $rootScope:infdig Error calling http in view method

Question

I'm trying to get some information from a server in an html page of an AngularJS app. The method itself is working fine, however, when I call the function in my html file with $scope. I get a $rootScope:infidg Error.

Method in controller:

    $scope.getTranslation = function(){
        $http.get('https://producthero.com/index.php?option=com_hero&task=language.translate&s=SEARCH')
            .then(
                function (response) {
                    return response.data.translation;
                }
            );
    };

Call in html file with ng-app and ng-controller:

<div ng-controller="Product">
    <span>{{getTranslation()}}</span>
</div>

I'm using this way of translating because the initial backend of the site is running in Joomla, I know i18n, but we can't use it here.

The error is:

http://errors.angularjs.org/1.6.4/$rootScope/infdig?p0=10&p1=%5B%5D

angular.min.js:123 Error: [$rootScope:infdig] <http://errors.angularjs.org/1.6.4/$rootScope/infdig?p0=10&p1=%5B%5D>
    at angular.min.js:6
    at m.$digest (angular.min.js:147)
    at m.$apply (angular.min.js:149)
    at angular.min.js:21
    at Object.invoke (angular.min.js:44)
    at c (angular.min.js:21)
    at Sc (angular.min.js:22)
    at ue (angular.min.js:20)
    at HTMLDocument.<anonymous> (angular.min.js:331)
    at i (jquery.min.js:2)

I hope this is just me being stupid and that I'm missing something to make this kind of direct calls with http possible!

EDIT:

My solution on my translation problem is the following (thanks to @Aleksey Solovey for the answer):

Controller method

$scope.translations = {};

$scope.getTranslation = function(string){
    $http.get('https://producthero.com/index.php?option=com_hero&task=language.translate&s=' + string)
        .then(
            function (response) {
                $scope.translations[string] = response.data.translation;
            });
    };

View call

<div ng-app="products">

        <div ng-controller="Product">
            <span ng-init="getTranslation('SEARCH')">{{translations.SEARCH}}</span>
    </div>
</div>

Answer 1

$http request would return a Promise, not some value. So you need to populate a scoped variable first and then use it (asynchronously). Here is what it should look like:

var app = angular.module('myApp', []);
app.controller('Product', function($scope, $http) {
  $scope.getTranslation = function() {
    $http.get('https://producthero.com/index.php?option=com_hero&task=language.translate&s=SEARCH').
    then(function(response) {
      $scope.translation = response.data.translation;
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="Product">
    <span ng-init="getTranslation()">{{translation}}</span>
  </div>
</div>