Button inside ng-repeat to update input in form

Question

What I am trying to do is update an input field from within an ng-repeat. I have an ng-click on the button inside the ng-repeat for each user. When clicking on the button it should update the value of the input field which is outside the ng-repeat but in the same controller. I have just started using Angularjs and I seem to be missing something simple here, but just can't figure it out. Any help is greatly appreciated!

<div ng-app="MyApp">
    <div ng-controller="Main">
        <form name="myForm">
            <input type="email" ng-model="rootFolders">
            <button type="submit">Submit</button>
        </form> 
        <span ng-repeat="user in users" style="float:left">
            {{user.name}}<br>
            <button ng-click="rootFolders='{{user.login}}'">Load Email</button>
        </span>

    </div>
</div>

Controller

angular.module('MyApp', []);

function Main($scope) {
    $scope.rootFolders = '[email protected]';
    $scope.users = [
            {id:0,name:'user1',login:'[email protected]',password:'123456'},
            {id:1,name:'user2',login:'[email protected]',password:'123456'},
                    ]
}

Here is the fiddle: http://jsfiddle.net/DahDC/

Solution 1

You need to create a ng-click action in scope and pass in the user for current row.

<div ng-app="MyApp">
    <div ng-controller="Main">
        <form name="myForm">
            <input type="email" ng-model="rootFolders">
            <button type="submit">Submit</button>
        </form> <span ng-repeat="user in users" style="float:left">
            {{user.name}}<br>
            <button ng-click="loadEmail(user);">Load Email</button>
        </span>
    </div>
</div>

angular.module('MyApp', []);

function Main($scope) {
    $scope.rootFolders = '[email protected]';
    $scope.users = [{
        id: 0,
        name: 'user1',
        login: '[email protected]',
        password: '123456'
    }, {
        id: 1,
        name: 'user2',
        login: '[email protected]',
        password: '123456'
    }, ]

    $scope.loadEmail = function (user) {
        $scope.rootFolders = user.login;
    }
}

Try it. FIDDLE

Solution 2

I believe that because you are making the assignment inside ng-click inside ng-repeat, it is assigning the rootFolders property on the local scope there (the one instantiated by ng-repeat for each element). So your actually assigning a new property on all the local scopes of ng-repeat.

I've edited your fiddle to explicitly show this. A good learning point!

<div ng-app="MyApp">
<div ng-controller="Main">
    <form name="myForm">
        <input type="email" ng-model="rootFolders"> {{ rootFolders }}
        <button type="submit">Submit</button>
    </form> 
    <span ng-repeat="user in users" style="float:left">
        {{user.name}}<br>
        <button ng-click="rootFolders = user.login">Load Email {{ user.login }}</button><br/>
        {{ rootFolders }}
    </span>

</div>