DYNAMICALY BIND DROP DOWN IN ANGULARJS

HTML PAGE
--------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
    <script src="JS/App.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myCtrl">
       <table>
            <tr>
                <td ng-repeat="b in multipaleDropDown">
                    <select ng-model="values[b]" ng-change="Calculate();">
                        <option ng-value="0">0</option>
                        <option ng-value="10">10</option>
                        <option ng-value="20">20</option>
                        <option ng-value="30">30</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                   {{Sum}}
                </td>
            </tr>
        </table>
     </div>
</body>
</html>

---------------------------------------------------------------------------------------------------------

App.js PAGE

---------------------------------------------------------------------------------------------------------

var app = angular.module('myApp', []);

app.controller('myCtrl', function ($scope) {

     $scope.multipaleDropDown = ["dpO", "dpI"];

    $scope.values = {};

      $scope.Calculate = function ()

    {

        $scope.Sum = 0;

        angular.forEach($scope.values, function (value, key) {

            $scope.Sum = $scope.Sum + value;

        });

    }

});