Lightning passing the id and changing the component

Question

How do I pass a id, change the component to a different view and load results related to that id in the init function. cmp:

 <aura:iteration items="{!v.accounts}" var="account">
            <a  id="{!account.Id}" onclick = "{!c.getAccounts}"> 

                {!account.Name}
                </a>
              <br/>
            </aura:iteration>

controller:

getAccounts: function(component,event,helper){
   var selectedItem = event.target.id;;
      var accountEvent = $A.get("e.c:accountId");
      accountEvent .setParams({ "accountId" : selectedItem });
      accountEvent .fire();     
}

Answer 1

Finally winter 17 gave this much needed feature to navigate between components in lightning .Note the feature is in BETA you have to be in Winter 17 org to test this .

Here is a sample code

navigateToMyComponent : function(component, event, helper) {
    var evt = $A.get("e.force:navigateToComponent");
    evt.setParams({
        componentDef : "c:myComponent",
        componentAttributes: {
            contactName : component.get("v.contact.Name")
        }
    });
    evt.fire();
}

where componentDef is the component to navigate to, for example, c:myComponent

componentAttributes is the attributes that you pass from one component to the other .

Before the only way to use this was use $A.createComponent and this blog highlights how to write custom navigate code .