Displaying the checkbox for Records in salesforce Lightning

Apex  class
----------------
public class ContactList{

 @AuraEnabled

 public static WrapperClass displayData(){

  WrapperClass  wrap=new WrapperClass();

  wrap.conList=[select Id,Name,Email,Phone from Contact];

  wrap.count=wrap.conList.size();

  wrap.message='Total number of Records in the Contact';

  return wrap;



 }





 public class WrapperClass{

  @AuraEnabled public List<Contact>   conList    {set;get;}

  @AuraEnabled  public Integer        count      {set;get;}

  @AuraEnabled  public String         message    {set;get;}





 }





}


Component
---------------

<aura:component controller="ContactList">

  <aura:handler name="init" value="{!this}" action="{!c.getData}"/>

       <aura:attribute name="wrapperList" type="object"/>



  <div class="slds-p-around--large">

 

 

      {!v.wrapperList.message} = {!v.wrapperList.count}

 

    <table class="slds-table slds-table--bordered slds-table--cell-buffer">

      <thead>

        <tr class="slds-text-title--caps">
            <th scope="col">

            <div class="slds-truncate" title="Select">Select</div>

          </th>

          <th scope="col">

            <div class="slds-truncate" title="Id">Id</div>

          </th>

          <th scope="col">

            <div class="slds-truncate" title=" Name"> Name</div>

          </th>

          <th scope="col">

            <div class="slds-truncate" title="Site">Email</div>

          </th>

          <th scope="col">

            <div class="slds-truncate" title="Phone">Phone</div>

 

             </th>

        </tr>

      </thead>

           <tbody>

        <aura:iteration items="{!v.wrapperList.conList}" var="con">

          <tr>
              <th scope="row">
                  <ui:inputCheckbox aura:id="checkbox" />


            </th>

            <th scope="row">

              <div class="slds-truncate" title="{!con.Id}">{!con.Id}</div>

            </th>

            <th scope="row">

              <div class="slds-truncate" title="{!con.Name}">{!con.Name}</div>

            </th>

            <th scope="row">

              <div class="slds-truncate" title="{!con.Email}">{!con.Email}</div>

            </th>

            <th scope="row">

               <div class="slds-truncate" title="{!con.Phone}">{!con.Phone}</div>

            </th>

          </tr>

        </aura:iteration>

      </tbody>

    </table>

  </div>

</aura:component>

Controller

-----------

({

    getData: function(component, event, helper) {

      //call apex class method

      var action = component.get('c.displayData');

      action.setCallback(this, function(response) {

        //store state of response

        var state = response.getState();

        if (state === "SUCCESS") {

          //set response value in wrapperList attribute on component.

          console.log('check');

          component.set('v.wrapperList', response.getReturnValue());

        }

      });

      $A.enqueueAction(action);

    },

})

Lightning Application

---------------------------

<aura:application extends="force:slds" >

    <c:data/>

</aura:application>