<div class="col-md-8 box">
    <div class="panel panel-default">
        <div class="panel-heading">Companies</div>
        <div class="panel-body">
            <div ng-repeat="company in companies">
                <div class="panel panel-default">
                    <div class="panel-heading">Name: {{company.name}} <button ng-click="companies[$index].editCompany = !companies[$index].editCompany" class="pull-right">EDIT COMPANY</button></div>
                    <div class="panel-body" ng-if="!companies[$index].editCompany">
                        <p>Address: {{company.address}}</p>
                        <p>Revenue: {{company.revenue}}</p>
                        <p>Phone Number: {{company.phone}}</p>
                        <button ng-click="getPeople(companies[$index]._id, $index); companies[$index].viewEmployees = !companies[$index].viewEmployees">People Who Work Here</button>
                        <div ng-if="companies[$index].viewEmployees">
                            <show-employees-list></show-employees-list>
                        </div>
                    </div>
                </div>
                <div ng-if="companies[$index].editCompany">
                    <edit-company-directive></edit-company-directive>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="employee-box" ng-repeat="employee in companies[$index].employees">
    <span class="glyphicon glyphicon-edit pull-right" ng-click="companies[$index].editEmployee = !companies[$index].editEmployee; clickEdit()"></span>
    <span class="glyphicon glyphicon-remove pull-right" ng-click="deletePerson(employee._id, $index, companies[$parent.$index].employees)"></span>
    <div ng-if="!companies[$index].editEmployee">
        <div>
            <p><b>Name:</b> {{employee.name}}</p>
            <p><b>Email:</b> {{employee.email}}</p>
        </div>
    </div>
    <div ng-if="companies[$index].editEmployee" class="form-body">
        <form name="editPersonForm" ng-submit="editPerson(employee._id, $parent.$parent.index, $parent.index)">
            <input type="text" ng-model="nameEdit" id="nameEdit" placeholder="Employee" class="form-control" required></input>
            <input type="text" ng-model="emailEdit" id="emailEdit" placeholder="Email" class="form-control" required></input>
            <button type="submit" id="submitButton" class="btn btn-success form-actions">Submit</button>
        </form>
    </div>
</div>

function showEmployeesList(sigFigFactory) {
    var directive = {
        restrict: 'E',
        templateUrl: 'Directives/showEmployeesList/showEmployeesList.html',
        scope: '=',
        require: '^parentDirective',
        link: link
    };
    return directive;

    function link(scope, element, attra, controller) {
        scope.deletePerson = function(id, index, employees) {
            sigFigFactory.deletePerson(id).then(function(response) {
                employees.splice(index, 1);
                return response;
            })
        };

        scope.editPerson = function(personId, index1, index2) {
            scope.person = {
                name: scope.nameEdit,
                email: scope.emailEdit
            };

            console.log('person ', scope.person);
        };
    }
}