<!-- JS Code -->
var myapp = angular.module('myapp', []); myapp.controller('myctrl', ['$scope', function ($scope) { $scope.detailsone = result; //Api response Array format stored in this variable $scope.detailstwo = result; //Api response Array format stored in this variable }]);
<html ng-app="myapp">
<head> </head>
<body ng-controller="myctrl">
<div> Button 1 </div> // click on button 1 it will redirect to firstdetail.html(using UI Router). firstdetail.html and controller is firstctrl
<div> Button 2 </div> // click on button 2 it will redirect to seconddetail.html(using UI Router). seconddetail.html and controller is secondctrl
<!--Sample firstdetail.html-->
<div> <a href=""> First Detail Click </a> // Click here it will redirect to detail.html with this value $scope.detailsone(API call) </div>
<!--Sample firstdetail.html-->
<div> <a href=""> Second Detail Click </a> // Click here it will also redirect to detail.html with this value $scope.detailstwo(API call) </div>
<!--This is sample format of detail.html--><strong>I want to show div1 details when i click on button1
and I want to show div2 details when i click on button2 and div1 and div2 htmls are in same page.
problem is it's not working properly. suppose i clicked on button 2 it fails to load api at that time it showing div1 details. how can i differentiate this data based on ajax response stored scope value.</strong>
<div class="wrapper">
<div class="div1-details" ng-if="!detailstwo">
<div> Div1 Heading </div>
<div> Div1 Table </div>
<div> Div1 Pagination </div>
</div>
<div class="div2-details" ng-if="!!detailstwo">
<div> Div2 Heading </div>
<div> Div3 Table </div>
<div> Div4 Pagination </div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<!-- Angular js -->
</body>
</html>