<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8"> 
<!-- css file -->
<!--App file -->  
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" />
<!-- External file -->
</head>
<body>
<div ng-controller="Ctrl" >
    <form class="Scroller-Container" name="multipleCheckbox" novalidate >
        <div ng-app>
          <div ng-controller="Ctrl">
              <div>
                What would you like?
              	<div ng-repeat="(key, val) in fruits">
                    <input type="checkbox" ng-model="formData.selectedFruits[val.name]" 
                    ng-required="!someSelected(formData.selectedFruits)">  {{val.name}}
              	</div>
              	<p class="error" ng-show="submitted && multipleCheckbox.$error.required">hata var hacı</p>
               </div>
               <pre>{{formData.selectedFruits}}</pre>
               <input type="submit" id="submit" value="Submit" ng-click="submitted=true" />
            </div>
          </div>
    </form>
</div>
</body>
</html>
// Code goes here

var app = angular.module('App', []); 
function Ctrl($scope) {
    
    $scope.formData = {};
    
    $scope.formData.selectedFruits = {};
    
    $scope.fruits = [{'name':'Apple', 'id':1}, {'name':'Orange', 'id':2}, {'name':'Banana', 'id':3}, {'name':'Mango', 'id':4},];
    
    $scope.someSelected = function (object) {
      return Object.keys(object).some(function (key) {
        return object[key];
      });
    }
    
    $scope.submitForm = function() {
        console.log($scope.formData.selectedFruits);
    }
}
/* Styles go here */

.error{
  color: red;
}