Movie Search using the OMDb API (http://www.omdbapi.com)

<!doctype html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
  <script src="script.js"></script>
  <title>Movie Search | OMDb API</title>
</head>

<body ng-app="OMDbAPISearch">
  <div class="container" ng-controller="searchMovies">

    <h1>Search a Movie Title Below</h1>
    <p>This application utilizes OMDb API data for all results (<a href="http://www.omdbapi.com" target="_blank">http://www.omdbapi.com</a>)</p>
    <form>
      <div class="search">
       <input id="theSearch" ng-model="searchparam" placeholder="movie name" type="text" ngTrim="true" />
       <button ng-click="fetch()">Search</button>
       <div class="clear"></div>
      </div>
    </form>

    <div class="results">

      <div class="result" movie-srch-results ng-repeat="movie in movieResults"></div>

    </div>
    <div class="noResults"></div>

  </div>
</body>

</html>

(function(angular) {
  'use strict';
  angular.module('OMDbAPISearch', [])
    .controller('searchMovies', ['$scope', '$http',
      function($scope, $http) {
        $scope.method = 'GET';
        $scope.fetch = function() {
          if ($scope.searchparam) {
            $scope.url = 'https://www.omdbapi.com/?s=' + $scope.searchparam + '&type=movie&r=json';
            $http({
              method: $scope.method,
              url: $scope.url
            }).
            then(function(response) {
              if (response.data.Response) {
                // success
                $('.results').css('display', 'block');
                $('.noResults').css('display', 'none');
                var theSrchResults = response.data["Search"];
                angular.forEach(theSrchResults, function(obj) {
                  // loop through each movie, and pull the details using the IMDB ID
                  $http({
                    method: $scope.method,
                    url: 'https://www.omdbapi.com/?i=' + obj.imdbID + '&plot=full&r=json&tomatoes=true'
                  }).
                  then(function(response) {
                    // extend the details to the parent
                    obj.details = response.data;
                  });
                });
                $scope.movieResults = theSrchResults;
              } else {
                //error, movie not found
                console.log("not found");
                $('.results').css('display', 'none');
                $('.noResults').css('display', 'block');
                $('.noResults').html("<strong>No results found.</strong>");
              }
            }, function(response) {
              console.log("failure");
              $('.results').css('display', 'none');
              $('.noResults').css('display', 'block');
              $('.noResults').html("<strong>Network or data error, please try again.</strong>");
            });
          } else {
            // no input value
            $('.results').css('display', 'none');
            $('.noResults').css('display', 'none');
            $('#theSearch').fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
          }
        };
      }
    ])
    .directive('movieSrchResults', function() {
      return {
        templateUrl: 'movieResults.html'
      };
    });
})(window.angular);

body{
  margin:0;
  padding:0;
  background-color:#718EA4;
  color:#123652;
}
a{
  color:#123652;
}
.container{
  width:60%;
  padding:20px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  font-family:Arial, Helvetica, sans-serif;
  font-size:15px;
}
@media screen and (max-width:850px){
  .container{
   width:75%;
   padding:15px;
  }
}

h1{
  margin:0;
  font-size:25px;
}
.move-title{
  font-size:19px;
  color:#e0eaf9;
  font-weight:bold;
}

p{
  margin:15px 0;
}

.search > input{
  float:left;
  width:75%;
  margin:0;
  padding:10px 5px;
  border:none;
  max-height:40px;
}
.search > button{
  float:right;
  width:23%;
  margin:0;
  padding:10px 15px;
  background-color:#042037;
  color:#fff;
  font-weight:bold;
  border:none;
  max-height:40px;
}
@media screen and (max-width:850px){
  .search > input{
   width:60%; 
  }
  .search > button{
   width:35%; 
  }
}

button:hover{
  cursor:pointer;
}

.results, .noResults{
  display:none;
  margin-top:20px;
}

.result{
  margin-bottom:12px;
  border:1px solid #000;
  background-color:#496D89;
  padding:15px;
  color:#fff;
}

.result > span{
  width:45%;
  float:left;
  line-height:1.5em;
}
.result > span:not(:first-child){
  float:right;
}

.reviews{
  margin-top:10px;
}

.clear{clear:both;}

       <span>
         
         <div class="move-title">{{movie.Title}} ({{movie.Year}})</div>
         <div><strong>Starring:</strong> {{movie.details.Actors}}</div>
         <div><strong>Rated:</strong> {{movie.details.Rated}}</div>
         <div><strong>Runtime:</strong> {{movie.details.Runtime}}</div>
         <div><strong>Genre:</strong> {{movie.details.Genre}}</div>
         <div><strong>Director:</strong> {{movie.details.Director}}</div>
         <div><strong>Writer:</strong> {{movie.details.Writer}}</div>
         <div><strong>Language:</strong> {{movie.details.Language}}</div>
         <div><strong>Studio:</strong> {{movie.details.Production}}</div>
         
       </span>
       
       <span>
         
         <div><strong>Plot: </strong>{{movie.details.Plot}}</div>
         
       </span>
       
       <div class="clear"></div>
       
       <div class="reviews">
         
         <em>IMDB Rating: {{movie.details.imdbRating}} | Rotten Tomatoes Meter: {{movie.details.tomatoMeter}} ({{movie.details.tomatoImage}}) | Metascore: {{movie.details.Metascore}}</em>
         
       </div>