JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller="MyController as vm">
  <div class="preloader" ng-hide="vm.isReady"></div>
  <div class="content" ng-if="vm.isReady" ng-cloak>
    <h2 ng-bind="vm.movie.Title"></h2>
    <h3 ng-bind="vm.movie.Year"></h3>
    <p ng-bind="vm.movie.Plot"></p>
    <img ng-src="{{vm.movie.Poster}}" alt="{{vm.movie.Title}}">
  </div>
</div>

CSS

.preloader {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('http://s018.radikal.ru/i527/1607/3d/2dd8353d01b2.gif') no-repeat;
}

JavaScript

(function() {
  angular.module('app', []);

  angular.module('app')
    .controller('MyController', MyController);

  MyController.$inject = ['$timeout', 'movieService'];

  function MyController($timeout, movieService) {
    var vm = this;
    vm.isReady = false;
    vm.movie = {};

    init();
    //////////////////////////
    function init() {
      movieService.getMovie().then(function(data) {
        vm.movie = data;
        vm.isReady = true;
      })
    }
  }

  //////////////////////////////////////////////////////////
  angular.module('app')
    .factory('movieService', movieService);

  movieService.$inject = ['$http'];

  function movieService($http) {
    var service = {
      getMovie: getMovie
    };
    var request = 'http://www.omdbapi.com/?i=tt1392190&plot=short&r=json';

    return service;
    ///////////////
    function getMovie() {
      return $http.get(request).then(function(responce) {
        return responce.data
      });
    }
  }
})()