AngularJS 1.6.1 form and ngInclude

Question

Angular 1.6.1 breaks ngInclude in my project. I use ui-bootstrap 0.14 for the tabs.

<uib-tabset class="col-xs-11 " id="detailsContainer" >
    <uib-tab active="$root.isFirstTabActive" heading="{{'general.BASICS' | translate}}">
        <ng-include src="'QM-Technik/tickets/detailsTabs/grundlagen.html'"></ng-include>
    </uib-tab>
</uib-tabset>

My template is a form that looks like this:

<form class="form-horizontal" name="formular.grundlagen">
    <div class="col-sm-6">
        <div class="form-group">
            <label class="control-label pflichtFeld col-sm-4" translate="general.NUMBER"></label>
            <div class="col-sm-7">
                <input type="number" class="form-control" ng-model="ticket.tt_tik_nr" readonly />
            </div>
        </div>
</form>

My frontend is still running, but in the console i get this 2 messages 100 times in a second:

Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.6.1/$rootScope/infdig?p0=10&p1=%5B%5D

Error: [ng:cpws] http://errors.angularjs.org/1.6.1/ng/cpws

Answer 1

The problem is in the form name. Angular 1.6 does not allow to add a subobject as form name. If you use a simple string (for example "grundlagen"), it gets added to your $scope as $scope.grundlagen and there are no problems. If you use a object like "formular.grundlagen" (even if you predefine in your controller $scope.formular = {};) it causes the error messages.