Calling Ember.set() on property does not notify observer in wrapped component

This is a simplified example but demonstrates my problem well. I have an input for a PIN with buttons for digits (1, 2, 3, 4). The action on my buttons should set a property pinValue which is passed into the wrapped component pin-input. So this is what my code looks like:

See example: http://ift.tt/1MU5sK5

pin-entry.hbs

{{pin-input pinValue=pinValue}}
{{#each numbers as |num|}}
    <button {{action "addNumber" num}}>{{num}}</button>
{{/each}}

pin-entry.js

pinValue: null,
numbers: [1, 2, 3, 4],
actions: {
    addNumber: function (number) {
        this.set('pinValue', number);
        this.notifyPropertyChange('pinValue');
    }
}

pin-input.hbs

<input type=text value={{value}}>

pin-input.js

value: null,
pinValue: null,

onInsertAddObserver: function() {
    // trying to manually subscribe to pinValue here.
    // * from stackOverflow answer
    var controller = this.get('targetObject');
    controller.addObserver('pinValue', this, this.onDataChange)
}.on('didInsertElement'),

onDidChangeInput: function() {
    var current = this.$('input').val();
    this.set('value', current + this.get('pinValue'));
}.observes('pinValue')

The problem is when trying to input duplicate numbers back to back (e.g. 1233 will stop at 123). I cannot seem to force a property change so that onDidChangeInput will fire. The addObserver method is from another post*.

*Some ideas taken from here but did not help me: EmberJS notifyPropertyChange not making it to observer?