I have a search button with an <input> field. The button has ng-click="run()" which works immediately typing inside the input field. Isn't it suppose to work after the button is clicked?
I am new on AngularJS. Got stuck at this point. Thanks in advance.
<!DOCTYPE html> <html lang="en" ng-app="myApp" ng-controller="MovieController"> <head> <title ng-bind="'trivago.com: ' + details.Title"></title> <link rel="stylesheet" href="css/animate.min.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> </head> <body> <div class="container-fluid outerdiv"> <nav class="navbar navbar-fixed-top"> <div class="container-fluid" style="border-bottom:2px solid #C1C3C5;"> <div class="navbar-header"> <a class="navbar-brand" href="#"><b><span style="color:#027FAE;">tri</span><span style="color:#F48E05;">va</span><span style="color:#C84735;">go</span></b><!--<span class="span-style">Movie Browser</span>--></a> <a class="fa fa-heart" href="#"></a> <a class="navbar-brand" href="#">GBP</a> <a class="navbar-brand" href="#">EN</a> <a class="navbar-brand" href="#">MY PROFILE</a> </div> </div> </nav> <noscript> <div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div> </noscript> <center><div class="az"> <!--<div class="animated zoomInRight">--> <p class="text-center" style="color:#057AA9; font-size:28px;">Find your ideal hotel <br>for the best price </p> <div class="input-group search-bar animatedz"> <input float="right" type="text" ng-model="search" ng-model-options="{ debounce: 800 }" class="form-control" autofocus /> <span class="input-group-btn"> <button class="btn btn-primary" type="button" ng-click="run()">Search</button> </span> </div> <div id="main-info" ng-include="'partials/main-info.html'" class="col-md-8"></div> <!--<div id="related-results" ng-include="'partials/related-results.html'" class="col-md-4 animated bounce related-results"></div>--> </div></center> </div> <script src="js/angular.min.js"></script> <script src="js/app.js"></script> <div class="container footer"> <div class="col-xs-4"> <center><a href="#"><i class="fa fa-search"></i></a></center> <p class="text-center">Find your ideal hotel at the best price <br> with the world's largest hotel search</p> </div> <div class="col-xs-4"> <center><i class="material-icons"></i></center> <p class="text-center">Compare over 1 million hotels<br>from 250+ sites</p> </div> <div class="col-xs-4"> <center><a href="#"><i class="fa fa-smile-o"></i></a></center> <p class="text-center">Read the unbiased and <br>accurate traveller reviews</p> </div> </div> </body> </html>'use strict'; $scope.search = "Up"; function fetch(){ $http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full") .then(function(response){ $scope.details = response.data; }); $http.get("http://www.omdbapi.com/?s=" + $scope.search) .then(function(response){ $scope.related = response.data; }); } $scope.update = function(movie){ $scope.search = movie.Title; }; $scope.run= function(){ fetch(); } }); 
