Question

I have a ng-repeat loop over processes. What I am trying to do is to add a new block to the current process via a form with select box. However, my problem is I cannot access the model inside the loop from the controller. I guess this is because a new scope is created in a ng-repeat loop.

Still I couldn’t find a way to access model from controller. Here is html and javascript code pieces for you to understand problem better.

<div class="container" ng-controller="ProcessCtrl">
    <div class="process" ng-repeat="process in processes">
        <form class="form-inline" ng-submit="addBlock($index)">
            <select ng-model="blockType">
                <option value="1">type1</option>
                <option value="2">type2</option>
                <option value="3">type3</option>
            </select>
            <button type="submit">add</button>
        </form>
    </div>
</div>

angularjs controller

function ProcessCtrl($scope, $filter) {
    //...

    $scope.addBlock = function(index) {
        alert($scope.blockType); // undefined
        $scope.processes[index].blocks.push({type: $scope.blockType});
    };
}

Answer 1

Yes, the problem is that the parent scope can not access the child scopes created by ng-repeat.

Modify addBlock to also pass up the blockType:

ng-submit="addBlock($index, blockType)"