Trouble Coecting Ports and Subscriptions

I am reading through the Elm guide and their JavaScript interOp. Here is a simplified version:

port module FooBar exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.App as Html
import String

main =
  Html.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

-- subscriptions
port f : () -> Cmd msg
port g : ( Int -> msg ) -> Sub msg

subscriptions: Model -> Sub Msg
subscriptions model = g Get

-- MODEL
type alias Model = { pt :  Int }

-- VIEW
view: Model -> Html Msg
view model = Html.text ( toString model.pt )

-- UPDATE
type Msg = Ask | Get Int

update: Msg -> Model -> (Model, Cmd msg)
update msg model =
  case msg of
    Ask  -> (model, f () )
    Get x -> ( Model x, Cmd.none )

-- INIT
init: (Model, Cmd Msg)
init = ( Model 0, f ())

The App is initially set to 0 but it should read the message from JavaScript and be set to 1. However, it remains at 0. Are the Elm ports set up properly?

<!DOCTYPE html>
<meta charset="utf-8">
<body>

<div id="foobar"></div>
<script src="foo.js"></script>
<script>
  var node = document.getElementById("foobar");
  var app  = Elm.FooBar.embed(node);

  app.ports.f.subscribe(
    function(){
      var myValue = 1;
      app.ports.g.send(myValue);
    }
  );
</script>

</body>

Here I put: elm-make foo.elm --output=foo.js