Angularjs 向控制器表达式添加逻辑

我正在使用angularjs创建一个支持多种语言的网站

所以这个网站有一个服务列表。每项服务都有几种语言的名称和价格。我想通过更改语言来更改每个服务的名称

因此，我编写了以下代码：

myApp.controller('ServiceCtrl', ['$scope', '$http', 'languageService', function($scope, $http, languageService) {
var url = '../html/getServices.php';
//Getting following JSON:
//{"id":"1","ru":"russianNameOfAService","en":"englishNameOfAService","pr":"priceOfAService"}
$http.get(url).success(function(resp) {
    $scope.services = resp;
});
$scope.langService = languageService;
$scope.$watch(function() {
   return $scope.langService.getLang();
}, function(newLang) {
    if (newLang == 'en') {
        $('.serviceName').append('{{service.en}}');
    } else if (newLang == 'ru') {
        $('.serviceName').append('{{service.ru}}');
    }
});
}])

myApp.service('languageService' , function() {
var language = 'en';
return {
    getLang: function() {
        return language;
    },
    setLang: function(ind) {
          if (ind == '0') {
              language = 'en';
          } else if (ind == '1') {
              language = 'ru';
          }
    }
};
})

这就是我的角度代码。这是我的html：

<div class="service" ng-repeat="service in services" id="{{service.id}}">
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <div class="serviceName"></div>
                <div class="servicePrice">{{service.pr}}</div>
            </div>
        </div>
    </div>
</div>

{{service.pr}}

---

那么为什么它不起作用呢？或者，最好的方法是什么来动态更改.serviceName div中的表达式呢？

最简单的方法是修复手表，并用当前语言更新作用域中的变量

$scope.$watch(function() {
   return $scope.langService.getLang();
}, function(newLang) {
       $scope.currentLanguage=newLang;
});

然后在html中使用插值

{{currentLanguage}}