time-control.html

<template>
<require from='./time-graph'></require>
This is my time control!
<section time-graph="dailyTraffic.bind:dailyTraffic"></section>
</template>

time-control.js

import {inject,customElement} from 'aurelia-framework';


@customElement('time-control')
export class TimeControl{

  attached(){
	this.setDailyTraffic();
   }

  setDailyTraffic(){
    this.dailyTraffic='Daily traffic initialized';
  }
}
  

time-graph.js

import {noView,bindable,customAttribute,inject} from 'aurelia-framework';


@noView
@customAttribute('time-graph')
@bindable('dailyTraffic')
export class TimeGraph{

  dailyTrafficChanged(newTraffic){
   alert('My traffic has changed:' + newTraffic); //never called
  }

}

welcome.html

<template>
  <section>
    <h2>${heading}</h2>
	<require from='./time-control'></require>
     <time-control></time-control>
    <form role="form" submit.delegate="welcome()">
      <div class="form-group">
        <label for="fn">First Name</label>
        <input type="text" value.bind="firstName" class="form-control" id="fn" placeholder="first name">
      </div>
      <div class="form-group">
        <label for="ln">Last Name</label>
        <input type="text" value.bind="lastName" class="form-control" id="ln" placeholder="last name">
      </div>
      <div class="form-group">
        <label>Full Name</label>
        <p class="help-block">${fullName | upper}</p>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </section>
</template>

Two problems, one is yours and one is mine.

My problem is that we incorrectly identify options attributes if you have only one option. I have fixed that and will push the change and release shortly.

The problem in your code relates to how the binding is set up. Here's the correct html:

<section time-graph="daily-traffic.bind:dailyTraffic"></section>

Notice that you need to use the attribute name in HTML (derived from the property name).