[SalesForce] Lightning components, how to rerender in lightning components

I am trying to populate list of opportunities in a pagination fashion.

here is the output I got

But what here I didn't get is action for the next button….

Please find below the code and let me know where did I gone wrong.

Main Component:

<aura:attribute name="opportunities" type="Opportunity[]" />
<aura:attribute name="page" type="integer"/>
<aura:attribute name="pages" type="integer"/>
<aura:attribute name="total" type="integer"/>
<aura:attribute name="searchKey" type="String" default=""/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" /> 
<aura:handler event="c:SearchBarEvent" action="{!c.searchKeyFunction}"/>
<aura:handler event="c:PageChange" action="{!c.pageChange}"/>
<div class="slds-grid slds-grid--align-spread">
    <c:SearchBarCmpt />

    <fieldset class="slds-form-element">
        <div class="slds-form-element__control">
            <label class="slds-radio">
            <input type="radio" name="options" />
            <span class="slds-radio--faux"></span>
            <span class="slds-form-element__label">My Opportunities</span>
            </label>
            <label class="slds-radio">    
            <input type="radio" name="options" />
            <span class="slds-radio--faux"></span>
            <span class="slds-form-element__label">All Oportunities</span>
            </label>
        </div>
    </fieldset>

    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <label class="slds-checkbox">
            <input type="checkbox" name="options" id="checkbox-01" />
            <span class="slds-checkbox--faux"></span>
            <span class="slds-form-element__label">Open Opportunities</span>
            </label>
        </div>
    </div>

    <div>
        <button class="slds-button slds-button--neutral">New Opportunity</button>
    </div>

</div>
<table class="slds-table slds-table--bordered slds-table--striped">
    <thead>
        <tr class="slds-text-heading--label">
            <th width="20%"><span class="slds-truncate"><strong>Owner</strong></span></th>
            <th width="35%" scope="col"><span class="slds-truncate"><strong>Name</strong></span></th>
            <th width="10%" scope="col"><span class="slds-truncate"><strong>CloseDate</strong></span></th>
            <th width="15%" scope="col"><span class="slds-truncate"><strong>Stage</strong></span></th>
        </tr>
    </thead>
    </table>

    <aura:iteration items="{!v.opportunities}" var="opportunities">
       <c:AccOppListItem opportunities="{!opportunities}"/>  
    </aura:iteration>


<c:Paginator page="{!v.page}" pages="{!v.pages}" total="{!v.total}"/>

Controller.js:

({
    doInit : function(component, event, helper) { 
        helper.getOpps(component);
        //Fetch the expense list from the Apex controller   
        //var action = component.get("c.getOpps");

        //Set up the callback
        //var self = this;
        //action.setCallback(this, function(actionResult) {
        //    component.set("v.opportunities", actionResult.getReturnValue());            
        //});
        //$A.enqueueAction(action);
    },

    pageChange: function(component, event, helper) {
        var page = component.get("v.page") || 1;
        var direction = event.getParam("direction");
        page = (direction == "previous" ? (page - 1) : (page + 1));
        helper.getOpps(component, page);
    },

    searchKeyFunction: function(component, event, helper) {
        var searchKey = event.getParam("searchKey");
        helper.getOpps(component, searchKey);
        //var action = component.get("c.findByName");
        //action.setParams({
        //  "searchKey": searchKey
        //});
        //action.setCallback(this, function(a) {
        //    component.set("v.opportunities", a.getReturnValue());
        //});
        //$A.enqueueAction(action);
    }
})

helper:

({
    getOpps: function(component, event, page) {
        page = page || 1;
        var action = component.get("c.findByPage");
        action.setParams({
            "pageNumber": page
        });
        action.setCallback(this, function(a) {
            var result = a.getReturnValue();
            component.set("v.opportunities", result.entries);
            component.set("v.page", result.page);
            component.set("v.total", result.total);
            component.set("v.pages", Math.ceil(result.total/2));
        });
        $A.enqueueAction(action);
    }
})

Paginator Component:(where exactly the next button is included in the main component)

<div class="slds-container">
    <div class="slds-grid slds-grid--align-spread">            
        <div></div>
        <div id="count" class="slds-text-heading--label slds-align--absolute-center">{!v.total} Total Records  |  page {!v.page} / {!v.pages}</div> 
        <div class="right"> 

                <aura:renderIf isTrue="{!v.page > 1}">  
                    <button type="button" class="slds-button slds-button--neutral" onclick="{!c.previousPage}">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> Previous
                    </button>
                </aura:renderIf>  
                <aura:renderIf isTrue="{!v.page &lt; v.pages}">  
                    <button type="button" class="slds-button slds-button--neutral" size="5px" onclick="{!c.nextPage}">
                        Next <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </button>
                </aura:renderIf> 

        </div>  

    </div>
</div>  

Controller.js

({
    previousPage : function(component, event, helper) {
        var myEvent = $A.get("e.c:PageChange");
        myEvent.setParams({ "direction": "previous"});
        myEvent.fire();
    },
    nextPage : function(component, event, helper) {
        var myEvent = $A.get("e.c:PageChange");
        myEvent.setParams({ "direction": "next"});
        myEvent.fire();
    }
})

Pagechange.evt

<aura:event type="APPLICATION" description="Event template">
    <aura:attribute name="direction" type="String"/>
</aura:event>

Apex Controller:

public class AccOppRLController {

    @AuraEnabled
    public static PagedResult findByPage(Decimal pageNumber){
        Integer pageSize = 5;
        //String name = '%' + searchKey + '%';
        Integer offset = ((Integer)pageNumber - 1) * pageSize;
        system.debug('offset==='+offset+'  pageNumber===='+pageNumber);
        PagedResult r =  new PagedResult();
        r.pageSize = pageSize;
        r.page = (Integer) pageNumber;
        r.total = [SELECT Count() FROM Opportunity];
        r.entries = [SELECT Id, name, Owner.Name, CloseDate, StageName FROM Opportunity LIMIT :pageSize OFFSET :offset];
        return r;
    }

    @AuraEnabled
    public static List<Opportunity> getOpps() {
        return [SELECT Id, name, Owner.Name, CloseDate, StageName FROM Opportunity LIMIT 10];
    }   
    @AuraEnabled
    public static List<Opportunity> findByName(String searchKey){
        String name = '%' + searchKey + '%';
        return [SELECT Id, name, Owner.Name, CloseDate, StageName FROM Opportunity WHERE name LIKE :name LIMIT 10];
    }
}

Please help, it's really urgent.

Thanks in advance.