title: AngularJS and angular-translate: Using the translate filter in an object literal
body: <p>I have an angular JS app that uses angular-translate for i18n. This app also displays charts using highcharts.js. I've built a custom directive on top of highcharts-ng that lets me pass in an object literal as an expression that then gets used to configure the axes of the charts:</p>
  
  <pre><code>angular.module('myApp')
    .directive('xxChart', function() {
      return {
        transclude: true,
        template: '&lt;highchart id=id config=config ng-transclude&gt;',
        restrict: 'E',
        scope: {
          id: '=',
          title: '=',
          xxXAxis: '=',
          xxYAxis: '='
        },
        controller: function($scope) {
          $scope.config = {
            options: {
              chart: {
                lineWidth: 10
              },
              xAxis: $scope.xxXAxis,
              yAxis: $scope.xxYAxis,
              plotOptions: {
                spline: {
                  lineWidth: 3
                },
                area: {
                  lineWidth: 3
                }
              }
            },
            series: [],
            title: {
              text: $scope.title
            }
          };
  
          this.addSeries = function(name) {
            var series = {
              name: name,
              data: []
            };
            $scope.config.series.push(series);
            return series;
          };
        }
      };
    });
  </code></pre>
  
  <p>I use the directive like this:</p>
  
  <pre><code>&lt;xx-chart xx-x-axis="{title: {text: 'My x axis'}}"&gt;
  ...
  &lt;/xx-chart&gt;
  </code></pre>
  
  <p>Now I want to translate my app. I've noticed that this obviously won't work:</p>
  
  <pre><code>&lt;xx-chart xx-x-axis="{title: {text: 'My x axis' | translate}}"&gt;
  ...
  &lt;/xx-chart&gt;
  </code></pre>
  
  <p>Is there a way to use the translate filter inside an object literal? If not, how should I solve my problem while sticking to the angular architecture?</p>
  
  <p>Also note that I can't change the semantics of the directive in a way that breaks passing in object literals that contain other, non-translated fields.</p>
  
  <p>Minimal-example-fiddle here: <a href="http://jsfiddle.net/Ssn53" rel="nofollow">http://jsfiddle.net/Ssn53</a></p>