title: angularjs custom checkbox button
body: <p>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?</p>
  
  <p>BTW when I use normal checkboxes (unstyled) it works perfectly.  </p>
  
  <p>checkbox.html</p>
  
  <pre><code>        &lt;!-- Custom checkbox portion of the html page --&gt;
          &lt;div class="criteria-two-col" ng-repeat="value in searchcriterias.gender"&gt;
               &lt;div data-ng-click="newsearch('gender')"&gt;
               &lt;input type='checkbox' class="styled-checkbox" id="gender{{value}}" value="    
           {{value}}" check-list='checked_gender'/&gt;
               &lt;label for="gender{{value}}"&gt;&lt;span&gt;&lt;/span&gt;{{value}}&lt;/label&gt;
              &lt;/div&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>   /*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;
  }
  </code></pre>