Hide and display html elements

Posted on Edited on In , Views: 
<body ng-app="myapp">
    <div class="container-fluid" ng-controller="myctrl">
        <ul class="nav nav-tabs" id="myTab" role="tablist" style="display:flex">
            <li class="nav-item" role="presentation" id="l1"></li>
            <li class="nav-item" role="presentation" id="l2"></li>
        </ul>

        <div class="tab-content" id="myTabContent" style="display:flex">
            <div class="tab-pane fade show active" id="pane1" role="tabpanel" aria-labelledby="tab1"></div>
            <div class="tab-pane fade" id="pane2" role="tabpanel" aria-labelledby="tab2"></div>
        </div>

        <div class="table-responsive" id="table1"></div>
    </div>
</body>


angular.module("myapp", []).controller("myctrl", ['$scope', '$http', function (scope, http) {
    scope.HideDisplayElements = function () {
        // hide the tabs
        document.getElementById("myTabContent").style.display = "none";   
        document.getElementById("myTab").style.display = "none";

        // hide table
        document.getElementById("table1").style.display = "flex";
    }
}

Reference