ng-repeat doesn't update when item added from component directive - angularjs

Question

I have problem of my code but couldn't find that,I updated an array but it doesn't update in my main view
here my code
app.controller("MainCtrl", function ($scope, $http) {
$scope.user = [];
$scope.adduser = function (fuser, luser) {
var name = { fname: fuser, lname: luser }
// debugger;
$scope.user.push(name);
};
<div ng-app="mainApp">
<div ng-controller="MainCtrl">
<h3>User Info</h3>
<userinfo></userinfo>
<div ng-repeat="name in user">
{{name.fname}}
</div>
</div>
<form name="myForm" ng-controller="MainCtrl">
First Name : <input type="text" ng-model="fname">
<br> Last Name : <input type="text" ng-model="lname">
<button type="button" class="btn btn-primary" ng-click="adduser(fname,lname)">Add</button>
</form>

Answer 1

You need to pass the variable in the directive,
<userinfo user='user'></userinfo>
and the directive as,
scope: {
user: '='
}

Answer 2

controllerAs syntax makes available your controller function this(context) accessible via its alias, here it is c. As you're using controllerAs syntax, Your binding values should be bounded to controller function context (this). You should be avoid using $scope in controller in controllerAs approach. Even while calling adduser method call it by controller alias c.adduser
Code
app.controller("MainCtrl", function ($http) {
var c= this;
c.user = [];
c.adduser = adduser;
function adduser(fuser, luser) {
var name = { fname: fuser, lname: luser }
// debugger;
c.user.push(name)
};
})