ng-show on ng-repeated list

by M. Junaid Salaat

HTML

<body ng-app="myapp">

  <div ng-controller="MyController" class="app">
    <ul>
      <input type="text" ng-model="queryStyle" />
      <li ng-repeat="style in style | filter:queryStyle" ng-class="{active:( $parent.selectedStyle == $index)}" ng-click="doClick(style, $index);">
        <h1>{{style.id}}</h1></li>
    </ul>
    <div class="overlay" ng-show="showOverlay">
      <h2>{{styleTags}}</h2>
    </div>
  </div>

</body>

CSS

.overlay {
   position: fixed;
   top: 0;
   margin-left: auto;
   margin-right: auto;
   height: 100%;
   width: 100%;
   background: rgba(255, 255, 255, .85)
 }
 
 .active {
   background-color: red;
 }

TypeScript

angular.module("myapp", [])
    .controller("MyController", function ($scope) {
        $scope.showOverlay = false;
        $scope.myData = {};
        $scope.style = [{
            id: "1",
            style: "one"
        }, {
            id: "2",
            style: "Two"
        }, {
            id: "3",
            style: "Three"
        }];
        $scope.doClick = function (style, index) {
            $scope.selectedStyle = index;
            $scope.styleTags = style.style;
            $scope.showOverlay = true;

        }
        $scope.toggle = function (item) {
            item.selected = !item.selected;
        };
        $scope.filterFunction = function(element) {
            return element.name.match(/^Ma/) ? true : false;
        };
    });