Resetting an input to initial value when a search result is clicked with AngularJS

Question

I've a list on ng-repeat that displays a list of results from a $http query (bind to an input). I'd like both for the list to disappear when the user clicks on one of the results and for the initial empty value of the model to be restored. Basically, the functionality is as follows:

User searches term, list displays results, user clicks on result, list disappears, user clicks on input again to make another search, list with new results appear.

So far I've managed to make the list disappear, but not to make it appear again when the user makes another search.

Here's the relevant code:

<input type="text" ng-model="name" ng-click="Research()"/>
  <ul ng-hide="clicked" ng-show="retype">
    <li ng-repeat="result in results" ng-click="getDetails(result.id)">{{result.title}}</li>
  </ul>

And the JS:

function Ctrl($scope, $http) {
var get_results = function(name) {
  if (name) {
    $http.get('http://api.discogs.com/database/search?type=artist&q='+ name +'&page=1&per_page=8').
      success(function(data3) {
        $scope.results = data3.results;
      });
  }
}
$scope.name = '';
$scope.$watch('name', get_results, true);


$scope.getDetails = function (id) {
  $http.get('http://api.discogs.com/artists/' + id).
    success(function(data) {
        $scope.artist = data;
    });
  $http.get('http://api.discogs.com/artists/' + id + '/releases?page=1&per_page=500').
    success(function(data2) {
        $scope.releases = data2.releases;
    });
  $scope.clicked = true;

}

function Research(){
  $scope.retype = true,
  $scope.name = '';
}

Plunkr is down, I'll make one as soon as possible. Any idea about what am I missing?

Answer 1

Your Research function is unnecessary because you don't need ng-show and ng-hide same time...

secondly you set clicked to ok but never set it false again after your research done...

here is working PLUNKER