Angular: $http call / directive issue

http://angularjs.org/

by Abhishek Sinha

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <h1>Angular $http call / directive bug</h1>
    <p>This fiddle illustrates a bug that shows that model w/ data fetched via an http call
    is not present within a directive.</p>
    <hr>
    <h2>HTTP call settings</h2>
    <li>Method: {{method}}
        <li>URL: {{url}}
            <br>
            <button ng-click="fetch()">fetch</button>
            <hr/>
             <h3>HTTP call result</h3>

            <li>HTTP response status: {{status}}</li>
            <li>HTTP response data: {{data}}</li>
                <hr/>
                <h2>Pretty tag</h2>
                <pretty-tag>make this pretty</pretty-tag>: shows the tag works.
                
                <hr/>
                <h3 style="color: red" >Should show http response data within pretty tag</h3>
                [<p>{{data}}</p>]
                
</div>

JavaScript

angular.module('myApp', [])
.config(['$httpProvider', function ($httpProvider) {
            // enable http caching
           $httpProvider.defaults.cache = true;
      }])

.directive('prettyTag', function($interpolate) {
    return {
        restrict: 'E',
        link: function(scope, element, attrs) {
          var text = element.text();
            //var text = attrs.ngModel;   
            var e = $interpolate(text)(scope);
            var htmlText = "<b>" + e + "</b>";
            element.html(htmlText);
        }
    };
});


function MyCtrl($scope, $http, $templateCache) {
    $scope.method = 'GET';
    $scope.url = 'http://jsonplaceholder.typicode.com/posts/1/comments';

    $scope.fetch = function () {
        $scope.code = null;
        $scope.response = null;

        $http({
            method: $scope.method,
            url: $scope.url,
            cache: true
        }).
        success(function (data, status) {
            $scope.status = status;
            $scope.data = data;
        }).
        error(function (data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
    };

}