ng-repeat wont refresh WITH $apply

Question

This is the code I'm using (and have been using throughout the whole project), the scope is updated but ng-repeat wont refresh and I'm using scope.$apply.. Have no idea why, few devs also took a look at the code.. no solution..

Directive:

app.directive("addBrandSettings", function(){
    return {
        restrict: "A",
        link: function(scope, element, attrs){
            element.bind("keypress", function(e){
                if(e.which === 13){
                    var brand = element.val();
                    scope.$apply(function(){
                        scope.settings.brands.push(brand);
                        console.log(scope.settings.brands);
                    })
                    element.val("");
                }
            })
        }
    }
});

HTML:

<input add-brand-settings type="text" placeholder="Add Brand"/>
<p ng-repeat="brand in settings.brands">{{brand}}<a remove-brand-settings index="{{$index}}" href="#"><i class="fa fa-times-circle"></i></a></p>

Scope:

    $scope.settings = {
        companyInfo: {
            name: "",
            email: "",
            phone: "",
            website: ""
        },
        users: [
            {
                username: "Supreme Manager",
                role: "Super User",
                password: "asdasd"
            },
            {
                username: "Regular Grunt",
                role: "User",
                password: "asdasd"
            }
        ],
        brands: [
            "Maxi",
            "Chipsy",
            "Bananice"
        ],
        retailers: [
            "Maxi",
            "Ikea",
            "Tempo"
        ]
    }

Answer 1

Your code works perfectly, so you probably have some syntax problem or something, here's a working example:

var app=angular.module('App', []);
function ctrl($scope){
   $scope.settings = {
        companyInfo: {
            name: "",
            email: "",
            phone: "",
            website: ""
        },
        users: [
            {
                username: "Supreme Manager",
                role: "Super User",
                password: "asdasd"
            },
            {
                username: "Regular Grunt",
                role: "User",
                password: "asdasd"
            }
        ],
        brands: [
            "Maxi",
            "Chipsy",
            "Bananice"
        ],
        retailers: [
            "Maxi",
            "Ikea",
            "Tempo"
        ]
    }
}
app.directive("addBrandSettings", function(){
    return {
        restrict: "A",
        link: function(scope, element, attrs){
            element.bind("keypress", function(e){
                if(e.which === 13){
                    var brand = element.val();
                    scope.$apply(function(){
                        scope.settings.brands.push(brand);
                        console.log(scope.settings.brands);
                    })
                    element.val("");
                }
            })
        }
    }
});

html:

<div ng-app="App"  ng-controller="ctrl">
<input add-brand-settings type="text" placeholder="Add Brand"/>
<p ng-repeat="brand in settings.brands">{{brand}}<a remove-brand-settings index="{{$index}}" href="#"><i class="fa fa-times-circle"></i></a></p>
</div>

Live example :http://jsfiddle.net/choroshin/7zVd2/