JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="MyApp">
    <div ng-controller="MyCtrl">
        <div ng-repeat="cont in contacts">
            <form ng-submit="newContact()">
                <input type="text" class="xdTextBox" ng-model="cont.ac"/>
                <input type="text" class="xdTextBox" ng-model="cont.cat"/>
                <input type="text" class="xdTextBox" ng-model="cont.loc"/>
                <input ng-if="cont.auth !== undefined" type="text" class="xdTextBox" ng-model="cont.auth"/>
                <input ng-if="cont.autname !== undefined" type="text" class="xdTextBox" ng-model="cont.autname"/>
                <button type="submit">Submit</button>
                <a href ng-click="addFields($index)">Add</a>
            </form>
        </div>
    </div>
</div>

JavaScript

var myApp = angular.module("MyApp", []);
myApp.controller("MyCtrl", function($scope) {
    // These were previously { ac: '', auth: '', autname: ''}, which is what it seems you actually want to add after clicking.
    $scope.contacts = [{ ac: '', cat: '', loc: ''},{ ac: '', cat: '', loc: ''}];
    console.log($scope.contacts);
    $scope.tasks = [];
    $scope.addFields = function ($index) {
        $scope.contacts[$index] = angular.extend($scope.contacts[$index], { ac: '', auth: '', autname: '' });
        console.log($scope.contacts);
        console.log($index);
    }
});