<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <title>Angular Playground</title>
  </head>

  <body ng-app="myApp">
    
    <div ng-controller="CurrencyCtrl">
      <form novalidate >
        <h3>Currencies Available</h3>
        <div class="checkbox">
          <input type="checkbox" name="currency" id="chk-all" ng-model="selectAll" ng-change="toggleAll()">
          <label for="chk-all">Select All</label>
        </div>
        <div class="checkbox checkbox-inline col-sm-4" ng-repeat="currency in currencies">
          <input type="checkbox" name="currency" id="chk-{{currency.id}}" ng-model="options[$index]" ng-value="currency" ng-change="toggleCurrency($index)">
          <label for="chk-{{currency.id}}">{{currency.symbol}}</label>
        </div>
        <br>
        <h3>Currencies Selected</h3>
        <div>
          <span ng-repeat-start="option in currencies | filter: {checked:true}">{{option.code}} - {{option.name}}</span>
          <br ng-repeat-end>
        </div>
      </form>
      <div id="another-section">
        <h3>Input with conditions:</h3>
        <div>
          <input type="checkbox" name="currency" id="portal" ng-model="portalIdEnabled">
          <label for="portal">Is portal enabled?</label>
        </div>
        <label for="usePortal">portal ID:</label>
        <input type="text" id="usePortal" ng-model="enterpriseDirectoryId" ng-show="portalIdEnabled"/><br>
        <label for="notificationsId">notifications ID:</label>
        <input type="text" id="notificationsId" ng-model="notificationsId" ng-show="!portalIdEnabled"/>
      </div>
    </div>

  <!-- Angular Material requires Angular.js Libraries -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.10/angular.min.js"></script>
  <script src="app.js"></script>
  <script src="script.js"></script>
  </body>

</html>
(function() {
    'use strict';

    angular
        .module('myApp')
        .controller('CurrencyCtrl', ['$scope', function($scope) {
            
            $scope.portalIdEnabled = true;
  
            $scope.currencies = [
              { id: 1, code: 'BRZ', symbol: 'R$', name: 'Brazilian Real'},
              { id: 2, code: 'CAD', symbol: 'CAD$', name: 'Canadian Dollar'},
              { id: 3, code: 'USD', symbol: 'US$', name: 'United States Dollar'},
              { id: 4, code: 'CNY', symbol: '¥$', name: 'Chinese Yuan'}
            ];
        
            $scope.options = [];
        
            $scope.selectAll = false;
        
            $scope.toggleCurrency = function(index) {
              $scope.currencies[index].checked = !$scope.currencies[index].checked;
              if (!$scope.currencies[index].checked) {
                $scope.selectAll = false;
              }
            };
        
            $scope.toggleAll = function() {
              var checked = $scope.selectAll;
              for (var i = 0; i < $scope.currencies.length; i++) {
                $scope.options[i] = checked;
                $scope.currencies[i].checked = checked;
              }
            };
        }]);
})();
/* Styles go here */


(function() {
    'use strict';

    angular
        .module('myApp', [])
})();