Angular: Empty Fiddle

http://angularjs.org/

by oscard

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css">
<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="MyCtrl">
    <form>
      {{selectedType}}
      <br>
      <select name="" id="" ng-model="typeList.type1" ng-change="checkSelectedType()">
        <option ng-repeat="type in optionTypeList" ng-selected="typeList.type1==type" value="{{type}}">{{type}}</option>
      </select>
      <select name="" id="" ng-model="typeList.type2" ng-change="checkSelectedType()">
        <option ng-repeat="type in optionTypeList" ng-selected="typeList.type2==type" value="{{type}}">{{type}}</option>
      </select>
      <br>
      <br>
      <select name="" id="" ng-model="typeList.type3" ng-change="checkSelectedType()">
        <option ng-repeat="type in optionTypeList" ng-selected="typeList.type3==type" value="{{type}}">{{type}}</option>
      </select>
      <select name="" id="" ng-model="typeList.type4" ng-change="checkSelectedType()">
        <option ng-repeat="type in optionTypeList" ng-selected="typeList.type4==type" value="{{type}}">{{type}}</option>
      </select>
      <br>
      <br>
      <input class="btn-primary" type="submit" value="Add" ng-disabled="!selectedTypeValid"> {{selectedTypeValid}}
    </form>
  </div>
</div>

JavaScript

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

function MyCtrl($scope) {
  $scope.typeList = {
    type1: "Home",
    type2: "Work",
    type3: "Work",
    type4: "Fax"
  };
  $scope.optionTypeList = ["", "Home", "Mobile", "Work", "Fax"];
  $scope.selectedTypeValid = true;

  $scope.checkSelectedType = function() {
    $scope.selectedType = [];
    for (k in $scope.typeList) {
      if ($scope.typeList[k] != "")
        $scope.selectedType.push($scope.typeList[k]);

      $scope.selectedTypeValid = $scope.selectedType.includes('Fax');

      if ($scope.selectedType.length == 4 && $scope.selectedType.includes('Fax')) {
        $scope.selectedTypeValid = true;
      } else if ($scope.selectedType.length > 0 && $scope.selectedType.length <= 3  && (!$scope.selectedType.includes('Fax') || $scope.selectedType.includes('Fax'))) {
        $scope.selectedTypeValid = true;
      } else {
        $scope.selectedTypeValid = false;
      }
    }
  };
}