jquery - Angularjs: Jquery でスコープ レンダリングされた値を読み取る方法

Question

私はangularjsプロジェクトに取り組んでいます。そして、jquery（または他のJavaScriptコード）によってスコープによってレンダリングされた値にどのようにアクセスできるかを本当に知りたいです。これが私のテンプレートの一部です：

<div class="bars" data-label="Population" data-val="{{town.population}}" data-color="#cccccc">  

data-valそのため、スコープによってレンダリングされる属性の値を使用します。私はこのようにやっています：

TownApp.directive('bars', function () {
  return {
    restrict: 'C',
    link: function (scope, elem, attrs) {
         // I tried : this will get value: {{town.population}} as a string itself.
         $(".bar").jqbar({value: $(this).data('val');
         // also tried: this will get undefined
         elem.jqbar({ value: attrs.val});
         // and so on......
    }
  }
}

}))

コメントで説明したように、ディレクティブが実行されている間、スコープ値はまだページにレンダリングされていないため、それ以降のコードは値を適切に読み取ることができません。

それで、私の質問はどうすればこれを行うことができますか? どうもありがとう ！

アップデート：

コントローラとファクトリ コードの追加:

var TownApp=angular.module('TownApp',['ngRoute','ngResource']);

TownApp.factory('Town', function($http) {
    return $http.get('/database.json').then(function(response){
      return response.data;
    })
});

var TownCtrl = TownApp.controller('TownCtrl',function($scope, $routeParams, Town,   $location){
  Town.then(function(response){ 
  $scope.towns = response;

  for (var i = 0; i < response.length; i++) {
     if(response[i].Code === $routeParams.townId){
        var currentTown = response[i];
    }
      $scope.town = currentTown;
  }

  //.......
});

}))