different items for each ng repeat Angularjs

Question

I have a contact form that is possible to add more than one contact, but it comes by an ng-repeat I would like to know how I can add several contacts in a new div equal to ng repeat first but without repeating the items;;

that is the code >

 <div class="row">
            <div class="allContacts">
                <ul class="collapsibleContact col s12 m11" id="collapsibleContact" data-collapsible="accordion" ng->
                    <li class="contacts" ng-repeat="contact in contacts">
                        <div class="collapsible-header col s12 m11">
                            <i class="material-icons">supervisor_account</i>Contato
                            <input id="name" class="name" type="text" ng-model="customers.name" class="validate">
                        </div>
                        <div class="col s12 m1">
                            <a class="btn-floating btn-large waves-effect waves-light red" ng-click="addNewContact($index);" class="addContact">
                                <i class="material-icons pink accent-3">add</i>
                            </a>
                        </div>
                        <div class="collapsible-body">
                            <span>
                                <div class="newPhone" ng-repeat="telephone in telephones">
                                    <div class="moreContacts input-field col m5 s12" id="moreContacts">
                                        <i class="material-icons prefix">phone</i>
                                        <input id="number" type="text" ng-model="customers.number" class="number validate">
                                        <label for="number">Telefone</label>
                                    </div>
                                    <div class="input-field col m5 s12">
                                        <input id="type" type="text" ng-model="customers.type" class="type validate">
                                        <label class="active">Tipo</label>
                                    </div>
                                    <div class="col s12 m2">
                                        <a class="btn-floating btn-large waves-effect waves-light red moreTelephones" ng-click="moreTelephones();">
                                            <i class="material-icons pink accent-3">add</i>
                                        </a>
                                    </div>
                                </div>
                                <div class="mewEmail" ng-repeat="email in emails">
                                    <div class="input-field left-align col s12 m10">
                                        <i class="material-icons prefix">email </i>
                                        <input type="text" id="" ng-model="customers.email" class=" validate">
                                        <label for="perfil">Email</label>
                                    </div>
                                    <div class="col s12 m2">
                                        <a class="btn-floating btn-large waves-effect waves-light red moreEmails" ng-click="moreEmails();">
                                            <i class="material-icons pink accent-3">add</i>
                                        </a>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </li>
                    <br>
                    <br>
                </ul>
            </div>
        </div>

controller

    $('.collapsibleContact').collapsible({});

$scope.customers;
// metodo que add um novo contato
$scope.contacts = [{}];
$scope.addNewContact = function() {
    $scope.contacts.push({});
};
//fim do metodo de add novo contato
//add mais emails
$scope.emails = [{}];
$scope.moreEmails = function() {
    $scope.emails.push({});
};
//fim mais emails
//mais telefones
$scope.telephones = [{}];
$scope.moreTelephones = function() {
    $scope.telephones.push({});
}

Answer 1

In your HTML the arrays telephones and emails are drawn inside the list element that repeats its array Contacts:

<li class="contacts" ng-repeat="contact in contacts">
    <div class="newPhone" ng-repeat="telephone in telephones">
    ...
    <div class="mewEmail" ng-repeat="email in emails">
    ...
</li>

But the objects in the JS code are independent, so every new contact you draw will repeat all emails and phones, not just emails and phones that specific contact.

To have the result that I imagine is desired, should do so in JS:

$scope.contacts = [{emails:[], telephones: []}];
$scope.addNewContact = function() {
    $scope.contacts.push({emails:[], telephones: []});
};

The emails and telephones must be inside the Collection Contacts, reflecting the way you want to display in HTML:

<li class="contacts" ng-repeat="contact in contacts">
    <div class="newPhone" ng-repeat="telephone in contact.telephones">
    ...
    <div class="mewEmail" ng-repeat="email in contact.emails">
    ...
</li>

Notice that now I put ng-repeat of the phones getting from the object contact.telephones