What you are seeing is the difference in behavior when iterating over an array of strings, vs. iterating over the characters in a string – unfortunately, this ng-repeat
line happily works with either input:
<li ng-repeat="song in msg.payload track by $index" style="list-style-type: none;">
So you will need to ensure that your msg.payload
is always an array of strings, even if it only has one song.
But I think the reason you see the display update as soon as you send the selected song is because the option “Add output messages to stored state” is checked. Also, I don’t think you want the option “Pass through messages from input” selected, so that incoming msgs are just used to build the list of radio buttons, not passed to any downstream flows.
Finally, you don’t really need the scope.action
function – as you have it defined, it’s just returning the selected song. So you can simplify the template code to just:
<md-button ng-click="send({payload: song})">
Click to send data to backend
</md-button>
TBH, I’m not entirely clear on why what works, but that is the mystery of Angular…