Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="TopNavController as TopNavCtrl">
  Output Navigation : 
  <div ng-bind-html="topnavCtrl.navbar"></div>
</div>

<!-- json file contains something similar to this :
<ul>
<li><a ui-sref="catpage({category: 'products', subcategory: 'whale toys'})" </a>Whale Toys</li>
<li><a ui-sref="catpage({category: 'products', subcategory: 'sharks toys'})"">Shark Toys</a></li>
</ul>
 -->

JavaScript

var myApp = angular.module('myApp',[]);

myApp.controller('TopNavController', ['NavbarFactory', '$sce', function(NavbarFactory, $sce) {
         var self = this;
         self.navbar ="";         

         NavbarFactory.getnav().then(function(data) {         	

             self.navbar = $sce.trustAsHtml(data);
         });

     }])

.factory('NavbarFactory', ['$http', function($http) {
  
        return {
            getnav: function() {
                return $http.get('/path/myjson').then(function(answer) {

                        var result = answer.data;                       
                        return result
                    },
                    function(error) {
                        console.log('Failed');
                    });
            }      
        }

}]);