diff --git a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
index 7e48a14..5913e15 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/controllers/TileViewListController.js
@@ -59,8 +59,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
     $scope.openModuleItemView = function (event) {
 
-        debugger;
-
         //0. Get selected Image Id
         var moduleItemDataToBeSaved = event.target.id;
 
@@ -144,6 +142,7 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
 
                 //0.5 create canvas on the top of image so that I can draw a line over the canvas.
                 var canvas = document.createElement('canvas');
+                canvas.id = 'aaDetailViewCanvas';
                 canvas.height = parseInt(($scope.imageHeight));
                 canvas.width = parseInt($scope.imageWidth);
                 canvas.style.left = '0px';
@@ -184,7 +183,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
           .then(
             function (result) {
                 $scope.aaPinData = result.data.Root.Item;
-                debugger;
                 angular.forEach($scope.aaPinData, function (value, key) {
 
                     $scope.context.beginPath();
@@ -259,7 +257,6 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         var promise = ModuleService.loadModuleDataBasedOnModuleName($scope.moduleName)
            .then(
              function (result) {
-                 alert("mukul");
                  // alert(JSON.stringify($scope.moduleLandingData));
                  $scope.moduleLandingData = result;
                  $scope.selectedAAListViewData = new jinqJs()
@@ -412,4 +409,58 @@ function ($scope, $rootScope, $compile, $http, $log, $location, $timeout, DA, Mo
         $scope.FilterByImage(1, query);
 
     }
+
+    $scope.showSelectedSystemPins = function (event) {
+
+        //1.Remove all the pins first
+        var canvasHeight = document.getElementById('aaDetailViewCanvas').height;
+        var canvasWidth = document.getElementById('aaDetailViewCanvas').width;
+        
+        $scope.context.clearRect(0, 0, canvasWidth, canvasHeight)
+        
+        var selectedSystemName = event.currentTarget.title;
+        alert('inside showSelectedSystemPins selectedSystemName:' + selectedSystemName);
+        var promise = ModuleService.getPinDataForImage($rootScope.imageName)
+
+          .then(
+            function (result) {
+                $scope.aaPinData = result.data.Root.Item;
+                var selectedSystemPinData = new jinqJs()
+                             .from($scope.aaPinData)
+                             .where("_BodySystemName == " + selectedSystemName)
+                             .select();
+                angular.forEach(selectedSystemPinData, function (value, key) {
+
+                    $scope.context.beginPath();
+                    $scope.context.moveTo(value._PinX, value._PinY);
+                    $scope.context.lineTo(value._HeadX, value._HeadY);
+                    $scope.context.stroke();
+
+                    var headX = (parseInt(value._HeadX)) - 20;
+                    var headY = (parseInt(value._HeadY)) - 15;
+
+                    var img = new Image();
+                    img.src = "~/../../../content/images/noraml-pin.png";
+                    img.onload = function () {
+                        $scope.context.drawImage(img, headX, headY);
+                    }
+
+                })
+
+                console.log(JSON.stringify(result, null, 4));
+            },
+             function (error) {
+                 // handle errors here
+                 console.log(' error: ' + error.statusText);
+             }
+            )
+    }
 }]);
+
+function showSelectedSystemPins(event) {
+    console.log('OnBodySystem chnaged is called outside ');
+    var scope = angular.element(document.getElementById("aaDetailPageDiv")).scope();
+    scope.$apply(function () {
+        scope.showSelectedSystemPins(event);
+    });
+}
\ No newline at end of file
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/services/ModuleService.js b/400-SOURCECODE/AIAHTML5.Web/app/services/ModuleService.js
index e048785..afd072c 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/services/ModuleService.js
+++ b/400-SOURCECODE/AIAHTML5.Web/app/services/ModuleService.js
@@ -74,7 +74,7 @@ AIA.service('ModuleService', function($http, DataService) {
 
         getPinDataForImage: function (imageName)
         {          
-            debugger;
+            
             var pindataFileNamePart1 = imageName.replace("aa_img_", "");
             var pinFileNamePart2 = pindataFileNamePart1.replace(".jpg", "");
 
diff --git a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
index 147300a..3076ecf 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/views/aa/atlas-anatomy-detail.html
@@ -11,7 +11,7 @@
     <div class="tools pull-left" style="top:44px;">
         <div class="toggle-icon toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"></div>
         <div class="">
-            <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm" > <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
+            <div class="col-sm-6" title="Hide Pins"><button class="btn btn-black btn-sm" ng-click="alert('hi pin')"> <img src="../../../content/images/aa/LeftMenu/hide-pin.png" alt="" title=""></button> </div>
             <div class="col-sm-6" title="Show Selected Pins"><button class="btn btn-black btn-sm pull-right"><img src="../../../content/images/aa/LeftMenu/draw-pin.png" alt="" title=""></button></div>
             <div class="col-sm-6" title="Show All Pins in System(s)"><button class="btn btn-primary btn-sm marginTop5"><img src="../../../content/images/aa/LeftMenu/all-pin.png" alt="" title=""></button></div>
             <div class="col-sm-6" title="Select System">
@@ -19,18 +19,18 @@
                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu221">
                     <li><a href="#" title="Current Structure">All</a></li>
                     <li role="separator" class="divider"></li>
-                    <li><a href="#" title="Cardiovascular">Cardiovascular</a></li>
-                    <li><a href="#" title="Digestive">Digestive</a></li>
-                    <li class="disabled"><a href="#" title="Endocrine">Endocrine</a></li>
-                    <li class="disabled"><a href="#" title="Immune">Immune</a></li>
-                    <li class="disabled"><a href="#" title="Integumentary">Integumentary</a></li>
-                    <li class="disabled"><a href="#" title="Lymphatic">Lymphatic</a></li>
-                    <li><a href="#" title="Muscular">Muscular</a></li>
-                    <li class="disabled"><a href="#" title="Nervous">Nervous</a></li>
-                    <li class="disabled"><a href="#" title="Reproductive">Reproductive</a></li>
-                    <li class="disabled"><a href="#" title="Respiratory">Respiratory</a></li>
-                    <li><a href="#" title="Skeletal">Skeletal</a></li>
-                    <li class="disabled"><a href="#" title="Urinary">Urinary</a></li>
+                    <li><a id="1" href="#" title="Cardiovascular"  onclick="showSelectedSystemPins(event)">Cardiovascular</a></li>
+                    <li><a id="2" href="#" title="Digestive" onclick="showSelectedSystemPins(event)">Digestive</a></li>
+                    <li class="disabled"><a id="3" href="#" title="Endocrine" onclick="showSelectedSystemPins(event)">Endocrine</a></li>
+                    <li ><a id="4" href="#" title="Immune" onclick="showSelectedSystemPins(event)">Immune</a></li>
+                    <li class="disabled"><a id="5" href="#" title="Integumentary" onclick="showSelectedSystemPins(event)">Integumentary</a></li>
+                    <li class="disabled"><a id="6" href="#" title="Lymphatic" onclick="showSelectedSystemPins(event)">Lymphatic</a></li>
+                    <li><a id="7" href="#" title="Muscular" onclick="showSelectedSystemPins(event)">Muscular</a></li>
+                    <li class="disabled"><a id="8" href="#" title="Nervous" onclick="showSelectedSystemPins(event)">Nervous</a></li>
+                    <li class="disabled"><a id="9" href="#" title="Reproductive" onclick="showSelectedSystemPins(event)">Reproductive</a></li>
+                    <li class="disabled"><a id="10" href="#" title="Respiratory" onclick="showSelectedSystemPins(event)">Respiratory</a></li>
+                    <li><a id="11" href="#" title="Skeletal" onclick="showSelectedSystemPins(event)">Skeletal</a></li>
+                    <li class="disabled"><a id="12" href="#" title="Urinary" onclick="showSelectedSystemPins(event)">Urinary</a></li>
                 </ul>
 
             </div>
@@ -155,3 +155,4 @@
     });
 </script>
 
+<script src="app/controllers/TileViewListController.js"></script>