Loading message or spinner icon before JSON loads in the same file as angular module and controller

Question

I am trying to figure out a way to not use $http.get() or $resource to load my JSON data from a separate file or URL since I can load my JSON data using a smarty code like $scope.products = {$data}; I want to load a spinner icon or a "loading" msg before my JSON data loads since the curly braces from angular code are ugly to display. Here is my code below and any thoughts would be appreciated.

<script type="text/javascript">
var app= angular.module('mysearch', []);
app.controller('mysearchController', ['$scope', function($scope){
        $scope.products = {$data}; 
]);
</script>

<div ng-app="mysearch">
   <div ng-controller="mysearchController">
      <div ng-repeat="item in products">
           {{item.sub_name}}
      </div>
      <p> {{item.title}}</p>
   </div>
</div>

Answer 1

You should be using ng-cloak directive. It prevents the document from showing unfinished AngularJS code while AngularJS is being loaded. An example of such is :

  <element ng-cloak>{{yourdata}}</element>

Edit 1:

https://jsfiddle.net/ph110293/ou5e1dsv/

Use ng-hide to show your spinner for the time being your angular loads and ng-show to show when your scope has loaded