angularjs custom checkbox button

Hi I'm trying to make a custom-styled checkbox in my angularjs application. Everytime a user checks or unchecks the checkbox, it sends a call to the server. However sometimes when I check or uncheck it sends null to the server via $HTPP service. What could be the problem?

BTW when I use normal checkboxes (unstyled) it works perfectly.

checkbox.html

        <!-- Custom checkbox portion of the html page -->
        <div class="criteria-two-col" ng-repeat="value in searchcriterias.gender">
             <div data-ng-click="newsearch('gender')">
             <input type='checkbox' class="styled-checkbox" id="gender{{value}}" value="    
         {{value}}" check-list='checked_gender'/>
             <label for="gender{{value}}"><span></span>{{value}}</label>
            </div>
         </div>

style.css

   /*Custom checkbox styling*/

 input[type="checkbox"].styled-checkbox {
   display: none;
     }

  input[type="checkbox"] + label {
  color:#000;
   font-weight:300;
  }

input[type="checkbox"] + label span {
display:inline-block;
width:19px;
height:19px;
margin:-1px 4px 0 0;
vertical-align:middle;
background:url(../../../images/check_radio_sheet.png) left top no-repeat;
cursor:pointer;
}

input[type="checkbox"]:checked + label span {
background:url(../../../images/check_radio_sheet.png) -19px top no-repeat;
}