Flexslider and functions.php

So I was trying to get flexslider to work on my front page and only loaded its CSS/JS files if the page detected is Home:

<?php // only loads Flexslider CSS and JS for the front page if( is_front_page() ) { ?> <!-- Flexslider CSS and JS --> <link rel="stylesheet" href="http://localhost/braatheenterprises.com/wp-content/themes/be_portfolio/css/flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://localhost/braatheenterprises.com/wp-content/themes/be_portfolio/js/flexslider.js"></script>

            <!-- Load the flexslider -->
            <script type="text/javascript" charset="utf-8">
              $(window).load(function() {
                $('.flexslider').flexslider({
                  animation: "slide",  // slide or fade
                  controlsContainer: ".flex-container" // the container that holds the flexslider
                });
              });
            </script>
        <?php } ?>

I'm fine with it working like this but a while back I did the WordPress tutorial, trying to enqueue and register scripts through functions.php like so:

// Load the Theme JS

//Why doesn't this work???
function theme_js() {
    wp_register_script( 'flexslider', get_template_directory_uri() . '/js/flexslider.js', array('jquery'), '', true );
    if( is_front_page() ) {
        wp_enqueue_script( 'flexslider' );
    }   
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery'), '', true );
}

add_action( 'wp_enqueue_scripts', 'theme_js' );

But it did not work. I tried different things like is_page('home'), is_page('Home'), typing in absolute URLs, but nothing. I guess if I got Flexslider to work the other way, I can move on but it's really bugging why I got this functions.php thing to work when I was following the course, but can't get it now. Any ideas would be greatly appreciated!