Using ng-click to show divs in Angular js

Question

So I have a link in an html box and when clicking the link iam trying to have it show a whole new set of divs replacing the present divs. I tried :

<a href="" ng-click="Search('Show Products A B C')" > Show Products </a> 

Search calls in the function in the controller which returns the data for the A B C products, which are then displayed using

<div ng-repeat="products in Search( 'Show Products A B C')" </div>

I am basically trying to do something like this:

  <div  ng-repeat=" href="" ng-click="Search('Show Products A B C')"> </div>

which is not proper syntax I understand. But right now nothing happens. Basically from that ng-click i would like to call that portion of the code (ng-repeat) because right now they are not connected. thanks

Answer 1

What you should do is to have some array or object A bound to $scope, then when you call search you update A and the changes will be reflected on your view

$scope.show=true;
$scope.products =[A,B,C];
$scope.Search = function() {
    // do list update
    $scope.show=false;
    $scope.products =[D,E,F] ;
}

You also need to change ng-repeat to this:

<div ng-repeat="product in products" </div>

And add ng-show to the first link:

<a href="#" ng-show = "show" ng-click="search();">Click Me</a>

Edit:

Check this fiddle for a working example.

Edit:

Fiddle updated reflecting latest changes.