[SOLVED] Open multiple instances of same partial view and controller in angularJS

Open multiple instances of same partial view and controller in angularJS

I am developing single page application using partial views and angularJS. I am having a scenario where I have to open same partial view multiple times with different data.

I tried to make controller name dynamic by adding app.directive and changing controller name both in js and html and then calls Angular-Complies method, but the issue is that it changes it for all previous tabs opened. Then I tried to make multiple js files and changing controller name in partial view with Jquery but still does not helps. Here is my code.

HTML:

<div ng-app="myApp">
   <!-- this is in view1.html -->
    <div ng-controller="DashboardDesignerController">
            <div ng-repeat="widget in workspace.widgets">stuff here
            </div>
   </div>
    <!-- this is in view1.html -->
    <div ng-controller="DashboardDesignerController">
            <div ng-repeat="widget in workspace.widgets">stuff here
            </div>
   </div>

//Angular controller is in separate JS file.

   app.controller("DashboardDesignerController" , function ($scope, $http, 
   $rootScope, $compile, $injector, $timeout) {
   }

I expect to behave every tab separately according to its data but currently when I go to first opened tab, it's scope changed with the last opened tab. Is there built in way of angularJS to doing it, Or some good approach will also appreciated.

Solution

Actually the issue was, I was calling chart drill down method in core JavaScript which was replacing $scope with last opened. Resolved the issue by getting scope with JQuery

var scope= angular.element($('.k-state-active').find('.tempDiv')[0]).scope();

and called angular function with this scope variable.