AngularJS: access json response in link function inside directive
<p>I'm going to use a chart library called Plotly. I'm creating a directive so I can use the library with angularJS and reuse in the future if needed.</p>

<p>I want to pass to the directive a object that will be used to create the graph. This objects is loaded through a call. Here's the code:</p>

<p>CONTROLLER:</p>

<pre><code>angular.module("app").controller("appDetailsController", 
    ['$scope', '$http', function($scope, $http) {


  $scope.graphData = {}


  $http.get('/api/analytics/24').then(function(data) {
    console.log('Loaded analytics data:', data);
    $scope.graphData = data.data
  })

}])
</code></pre>

<p>DIRECTIVE:</p>

<pre><code>angular.module("app").directive("timelineGraph", function() {
    return {
        restrict: "E",
        scope: {
            data: "="
        },
        link: function(scope, element, attr) {
            console.log("scope data:", scope, scope.data)
        }
    }
})
</code></pre>

<p>HTML: </p>

<pre><code>&lt;timeline-graph data="graphData"&gt;&lt;/timeline-graph&gt;
</code></pre>

<p>In "scope" inside the link function I can see that the data object is there but it's only populated after the call is made. So i figured out this would work and it does:</p>

<pre><code>scope.$watch('data', function(data) {
   if(data)
     console.log('data changed:', data)
})
</code></pre>

<p>But I'd like to know if there's a better way of handling this other than putting all my code inside the watch handler.</p>