Forms inside ng-repeat in Angular JS

Question

I am new to angular JS and started working on it just last week. I am using Angular-UI Bootstrap Tabs directive. On load the application shows a grid with list of records in a tab(static tab). When user picks a record from the grid inside static tab, I will show its details in a tab which is dynamically added to the DOM. I am yet to write that code but before that I am facing one issue, during load the input controls inside the form are visible till the time angularJs compiles the app. Is there a way to avoid it from happening, am I missing something here? If I am not very clear in my explanation (english is a second language) of the problem please feel free to ask

Below is the code I have written :

HTML :

<div class="container-fluid" id="appContentId" ng-app="appContent" ng-controller="appContentController">
        <tabset>
            <tab heading="EventList">
                @*Code to show list*@
            </tab>
            <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
                <form>
                    <div class="row">
                        <div class="col-lg-6">
                        </div>
                        <div class="col-lg-6" style="text-align:right;">
                            <button type="button" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" ng-model="tab.data.EventName" class="form-control" />
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>EventType</label>
                                <select ng-options="evt.Text for evt in tab.data.EventTypeList" ng-model="tab.data.EventType"></select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>Description</label>
                                <input type="text" ng-model="tab.data.Description" class="form-control" />
                            </div>
                        </div>
                    </div>
                </form>
            </tab>
        </tabset>
    </div>

Javascript :

var appContentModule = angular.module("appContent", ['ui.bootstrap']);

 appContentModule.controller("appContentController", function ($scope, $http) {
        $scope.tabs = [];
    });

Answer 1

    <tab ng-cloak ng-repeat="tab in tabs" heading="{{tab.title}}" 
active="tab.active" disable="tab.disabled">

I am guessing this is what you are looking for. You could also bind your elements using ng-bind instead of {{}}. This prevents the {{}} on page load till angular complies the app.