Filter in second ng-repeat maintaining column style with bootstrap 3

Question

I have a problem, I have a ng-repeat which inside has another ng-repeat and I am filtering the information in the second ng-repeat with "filter | input" from angular 1. So far so good, but I am showing information in 3 columns (col-md-4) and when there is no information in any of the options I lose the style.

Current Result:

How can I do that when there is at least one result in the columns they are next to the others maintaining the style (col-md-4) and those that have no results are hidden?

Expected result (Columns that have at least one result are sorted in style col-md-4 and those that have not been hidden):

My code is as follows, HTML:

        <input type="text" ng-model="search" class="form-control">

    <div class="row" >
        <div class="col-md-4" ng-repeat="section in sections">
            <p>{{ section.name }}</p>
            <li ng-repeat="tutorial in section.tutorials | filter:search">
                  {{tutorial.name}}
            </li>
            <br>
        </div>
        <div class="clearfix" ng-if="($index+1)%3==0"></div>
    </div>

JS (Simple array):

        angular.module('myApp', []).controller('getAnswers', function ($scope, $element) {
        $scope.sections = sections;
    });

    var sections = [{
            name: "Language",
            tutorials: [{
                active: "Active",
                name: "PHP"
            },{
                active: "Active",
                name: "C#"
            },{
                active: "Active",
                name: "Java"
            },{
                active: "Active",
                name: "Ruby"
            }]
        },{
            name: "Framework",
            tutorials: [{
                active: "Inactive",
                name: "PHP"
            },{
                active: "Active",
                name: "Codeigniter"
            },{
                active: "Inactive",
                name: "Angular"
            },{
                active: "Spring",
                name: "Ruby On"
            }]
    },{
            name: "Front",
            tutorials: [{
                active: "Inactive",
                name: "HTML"
            },{
                active: "Active",
                name: "CSS"
            },{
                active: "Inactive",
                name: "JS"
            },{
                active: "Spring",
                name: "Images"
            }]
    },{
            name: "Language",
            tutorials: [{
                active: "Active",
                name: "PHP"
            },{
                active: "Active",
                name: "C#"
            },{
                active: "Active",
                name: "Java"
            },{
                active: "Active",
                name: "Ruby"
            }]
        },{
            name: "Framework",
            tutorials: [{
                active: "Inactive",
                name: "Laravel"
            },{
                active: "Active",
                name: "Codeigniter"
            },{
                active: "Inactive",
                name: "Angular"
            },{
                active: "Spring",
                name: "Ruby On"
            }]
    },{
            name: "Front",
            tutorials: [{
                active: "Inactive",
                name: "HTML"
            },{
                active: "Active",
                name: "CSS"
            },{
                active: "Inactive",
                name: "JS"
            },{
                active: "Spring",
                name: "Images"
            }]
    }
    ];

Is it possible to achieve this with angular 1? Thank you. Greetings from Chile.

Answer 1

You can try with the following code

<p ng-if="(section.tutorials | filter:search).length!==0">{{ section.name }}</p>