I have the following code inside an angularjs app:

    <div class=radio input-group-addon>

      <label>

        <input type=radio name=radio1 value=foobar ng-model=myModel />

        my label

      </span>

    </div>

The outer div is 100% with a background color. Now I want to be able to make the whole area (the whole div container) clickable. I tried it with an ng-click handler on the div like this:

    <div class=radio input-group-addon ng-click=selectRadio($event)>

      <label>

        <input type=radio name=radio1 value=foobar ng-model=myModel />

        my label

      </span>

    </div>

The selectRadio($event) method looks like this:

$scope.selectRadio = function($event) {

  var radio = $(event.currentTarget).find(input[type='radio']);

  radio.prop(checked, true);

  radio.trigger(change);

}

Unfortunately, this doesn't trigger a change on myModel. Is there a way to trigger a model-bind-change event (don't know the right term to discribe this), to update the model of my radio button?

And furthermore I was wondering, if there is a more angular-way to achieve this?