On initial load of the page, some of the template code is displayed prior to AngularJS kicking in and loading the grid. Fix this, please.

Add a reset button that will clear the grid when pressed.

The move to Foundation messed up the vertical alignment of the row labels.

Add support for 16th notes (optional)

Fix the stop button so that it doesn't clear the whole grid when pressed.

@dougjohnston I'd like to know if there are some updates regarding the Angular 2 version.

I installed your app today and NPM module downloads gave me dependency error: "[email protected] wants [email protected] || >= 0.14.0-rc.0". Your package.json lists : "karma": "~0.12.0". The issue resolved itself when I ran a grunt-karma upgrade: "$ npm install [email protected]" So you might want to up the package.json karma version to 0.13.0 . . . although i am not yet sure what effect that will have on running grunt-karma (since I haven't done it yet).

Yesterday's update broke the width of the grid on smaller screens.

Rather than being embedded into a service, move the current kit into a JSON file. While you're at it, add a few more kits to choose from.

Give users the ability to create a playlist of different loops. For example:

Loop 3 x2
Loop 4 x6
Loop 1 x2

This would allow users to essentially create a song.

Remove the stop button all together and add a pause and reset button instead.

Remove bootstrap dependencies and replace it with Foundation 5.

Add some visualizations of the machine as it's playing...a chance to play around with D3, Canvas, SVG, etc.

Remove the beat counter and have it highlight the current beat in the grid itself.

New visitors to the page should only have to hit play in order to hear a fat beat.

Calling drumMachine.init() inside the controller doesn't seem right. Look into initializing the drum machine with asynchronous data earlier in the process with a promise. Approach:

http://stackoverflow.com/questions/16286605/initialize-angularjs-service-with-asynchronous-data

Take out the dependency on Sinatra and just use something like Grunt to do the preprocessing.

You must disabled the play button after it is pressed. Error can see for yourself by clicking it a second time in demo.

Look into using system time to track intervals rather than setTimeout:

http://www.sitepoint.com/creating-accurate-timers-in-javascript/

Most likely using just local storage, let visitors save their drum loops and be able to recall/load them during a later visit.

Add media queries, etc. to enable better mobile support.