Angular/Bootstrap Datepicker

Question

I'm using AngularJS with UI Bootstrap at the moment, and i've bound the lovely looking 'UI-Bootstrap-DatePicker' to each row of my table, problem is; when i click, it opens an instance of the DatePicker on each row.

I thought that as each row has it's own scope and that this would isolate the event that is fired into that scope. It appears that this is not the case.

What's the AngularJS approach to this? I've tried to simplify my code to the minimum for this example.

<script>
    //  Will go into application.js
    (function () {
        var app = angular.module("ngListApp", ['ui.bootstrap']);

    }());

    //  Will go into orderController.js
    (function () {
        var app = angular.module("ngListApp").controller('OrderController', function ($scope) {

            $scope.httpOrders = [{OrderId: 1, OrderDate: '1 June 2015'},{OrderId: 12, OrderDate: '2 July 2016'},{OrderId: 123, OrderDate: '3 August 2017'}];

            $scope.open = function ($event) {
                $event.preventDefault();
                $event.stopPropagation();
                $scope.opened = true;
            };

            $scope.format = 'dd-MMMM-yyyy';
        });
    }());
</script>

<div ng-controller="OrderController">
<table>
    <tr ng-repeat="current in httpOrders">
        <td><input ng-model="current.OrderId" class="form-control" /></td>
        <td class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="current.OrderDate" is-open="opened" />
            <span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span>
        </td>
    </tr>
</table>
</div>

Answer 1

A possible workaround would be use a new instance of OrderController for each row. Try adding this to your html template:

<div>
<table>
    <tr ng-repeat="current in httpOrders" ng-controller="OrderController">
        <td><input ng-model="current.OrderId" class="form-control" /></td>
        <td class="input-group">
            <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="current.OrderDate" is-open="opened" />
            <span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button></span>
        </td>
    </tr>
</table>
</div>

Notice I added ng-controller to the tr after the ng-repeat directive. This basically means every time it iterates over your httpOrder collection, it will create a new instance of the OrderController. Hope this helps and let me know if you have any questions.

DEMO: http://plnkr.co/edit/AVyP70v01gOdrpVjG5UH?p=preview