angular looping with scope variables in same controller

Question

I have 2 scope variables like the following:

 $scope.degrees =[{DegreeCategoryID:"1",DegreeCategory:"Accounting",DegreeCategoryType:"Applied Sciences"},
                {DegreeCategoryID:"2",DegreeCategory:"Advanced Manufacturing/Mechatronics Technology",DegreeCategoryType:"Applied Sciences"},
                {DegreeCategoryID:"3",DegreeCategory:"Air Conditioning and Refrigeration Technology",DegreeCategoryType:"Applied Sciences"},
                {DegreeCategoryID:"4",DegreeCategory:"Auto Body Technology",DegreeCategoryType:"Applied Sciences"},
                {DegreeCategoryID:"78",DegreeCategory:"Associate in Sciences",DegreeCategoryType:"Academic"},
                {DegreeCategoryID:"79",DegreeCategory:"Associate of Arts in Teaching",DegreeCategoryType:"Academic"},
                {DegreeCategoryID:"80",DegreeCategory:"Emphasis",DegreeCategoryType:"Academic"},
                {DegreeCategoryID:"81",DegreeCategory:"Field of Study",DegreeCategoryType:"Academic"}];

$scope.degreecategories=[{DegreeID:"1",DegreeCategoryID:"1",Degree:"Accounting AAS ",DegreeTypeID:"2",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
            {DegreeID:"2",DegreeCategoryID:"1",Degree:"Accounting Assistant Certificate ",DegreeTypeID:"1",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
            {DegreeID:"3",DegreeCategoryID:"1",Degree:"Accounting Clerk Certificate ",DegreeTypeID:"1",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
            {DegreeID:"4",DegreeCategoryID:"1",Degree:"Advanced Technical Certificate in Professional Accountancy",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"",ECC:"",MVC:"1",NLC:"",RLC:"",Description:""},
            {DegreeID:"5",DegreeCategoryID:"2",Degree:"Advanced Manufacturing/Mechatronics Technology AAS ",DegreeTypeID:"2",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"6",DegreeCategoryID:"2",Degree:"Advanced Manufacturing/Mechatronics Technology Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"1",NLC:"",RLC:"",Description:""},
            {DegreeID:"7",DegreeCategoryID:"3",Degree:"Air Conditioning and Refrigeration Technology AAS ",DegreeTypeID:"2",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"8",DegreeCategoryID:"3",Degree:"Profit Center Manager Enhanced Skills Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"9",DegreeCategoryID:"3",Degree:"Residential - Technician I Certificate ",DegreeTypeID:"1",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"10",DegreeCategoryID:"3",Degree:"Residential - Technician III Level II Certificate ",DegreeTypeID:"1",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"11",DegreeCategoryID:"3",Degree:"Residential AAS ",DegreeTypeID:"2",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"12",DegreeCategoryID:"4",Degree:"Auto Body Metal Technician Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""}];

Both my above variables are present in the same controller. I am trying to display data in such a way that, when i click a button named 'Academic', it displays all the DegreeCategoryType:"Academic" variables from $scope.degrees using a filter.(until here it works fine)

Now i wanted to display another list following the previous list based on the selection i make from within the list ie. when i click one selection from the above made list, i wanted to to display the details from my $scope.degreecategories such that the it matches and filters based on the DegreeCategoryID. How do i approach this issue? i already posted this question but the message i tried to convey was not proper.

Answer 1

MARKUP Masterlist

        <div ng-show="display.academic" class="col-lg-4 col-md-4 col-sm-4">
            <div class="panel panel-info list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:300px;overflow:auto;position:relative;">
                <div class="panel-heading">
                    <h3 class="panel-title">Academic</h3>
                </div>
                    <a href='#' ng-repeat="degree in degrees | filter:{DegreeCategoryType:'Academic'}" class="list-group-item">
                      <li ng-click="showAcademic(degree)" >{{degree.DegreeCategory}}</li>
                    </a>
            </div>
        </div>

Markup sublist

        <div ng-show="display.academiccourse" class="col-lg-9 col-md-9 col-sm-9">
            <div class="panel panel-info list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:300px;overflow:auto;position:relative;">
                <div class="panel-heading">
                    <h3 class="panel-title">{{DegreeCategory}}</h3>
                </div>
                    <a href='#' ng-repeat="degree in degreecategories | filter:{DegreeCategoryID:filterSub}" class="list-group-item">
                      <li ng-click="display.appliedsciencescourse" >{{degree.Degree}}</li>
                    </a>
            </div>
        </div>

JS

$scope.showAcademic = function(degree){
    $scope.DegreeCategory = degree.DegreeCategory;
    $scope.filterSub = degree.DegreeCategoryID;
    $scope.display.academiccourse = true;
};

Answer 2

        <a href='#' ng-repeat="degree in degrees | filter:{DegreeCategoryType:'Applied Sciences'}" class="list-group-item">
                      <li ng-click="display.appliedsciencescourse" >{{degree.DegreeCategory}}</li>
                    </a>

I cant see that your ng-click actually does anything. If your ng-click calls a function, applying the element clicked on as a parameter, then you can set $scope.selectedCategory = yourcategory, on your second list, you can filter by selectedCategory, that will exist in the scope.