Handling json data with angularjs on play scala 2.3.4

Question

I would like to render Json to angularJs in my view, so in a file events.scala.html I have this :

@(events: play.api.libs.json.JsValue)
@events

And it works fine, my Json data is displayed on my page.

But I would like to transmit this Json to angularJs, I would like to do something like this :

@(events: play.api.libs.json.JsValue)
@main(title = "title") {

<script>
app.controller ('TestCtrl', function ($scope){
    $scope.events = </script> @events <script>
});
</script>
<div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>

}

How should I proceed?

Answer 1

Have you tried not to close the script tag ?

@(events: play.api.libs.json.JsValue)
@main(title = "title") {

  <script>
    app.controller ('TestCtrl', function ($scope){
      $scope.events = @events ;
    });
  </script>
  <div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>

}

the play templates will be rendered before the javascript is interpreted in the browser so the above will be transformed as

  <script>
    app.controller ('TestCtrl', function ($scope){
      $scope.events = [{name:"event1"},{name:"event2"}] ;
    });
  </script>
  <div data-ng-controller="TestCtrl" data-ng-repeat="event in events">{{event.name}}</div>

once the browser receives it, it will interpret it. If the above is a valid angular program there is no reason it shouldn't work.